vue滤镜制作方法,vue怎么加镜头特效

首页 > 经验 > 作者:YD1662022-11-03 22:53:06

页面渲染

ejs中引入模板

<script src="/third-libs/swiper.min.js"></script>

使用组件

<engine-h5-swiper :pageData="pageData" />

后端服务初始化项目

工程目录上文已给出,也可以使用 koa-generator 脚手架工具生成

ejs-template 模板引擎配置

app.js

//配置ejs-template 模板引擎 render(app, { root: path.join(__dirname, 'views'), layout: false, viewExt: 'html', cache: false, debug: false }); 复制代码koa-static静态资源服务

因为html2canvas需要图片允许跨域,所以在静态资源服务中所有资源请求设置'Access-Control-Allow-Origin':'*'

app.js

//配置静态web app.use(koaStatic(__dirname '/public'), { gzip: true, setHeaders: function(res){ res.header( 'Access-Control-Allow-Origin', '*') }}); 复制代码修改路由的注册方式,通过遍历routes文件夹读取文件

app.js

const fs = require('fs') fs.readdirSync('./routes').forEach(route=> { let api = require(`./routes/${route}`) app.use(api.routes(), api.allowedMethods()) }) 复制代码添加jwt认证,同时过滤不需要认证的路由,如获取token

app.js

const jwt = require('koa-jwt') app.use(jwt({ secret: 'yourstr' }).unless({ path: [ /^\/$/, /\/token/, /\/wechat/, { url: /\/papers/, methods: ['GET'] } ] })); 复制代码中间件实现统一接口返回数据格式,全局错误捕获并响应

middleware/formatresponse.js

module.exports = async (ctx, next) => { await next().then(() => { if (ctx.status === 200) { ctx.body = { message: '成功', code: 200, body: ctx.body, status: true } } else if (ctx.status === 201) { // 201处理模板引擎渲染 } else { ctx.body = { message: ctx.body || '接口异常,请重试', code: ctx.status, body: '接口请求失败', status: false } } }).catch((err) => { if (err.status === 401) { ctx.status = 401; ctx.body = { code: 401, status: false, message: '登录过期,请重新登录' } } else { throw err } }) } 复制代码koa2-cors跨域处理

当接口发布到线上,前端通过ajax请求时,会报跨域的错误。koa2使用koa2-cors这个库非常方便的实现了跨域配置,使用起来也很简单

const cors = require('koa2-cors'); app.use(cors()); 复制代码连接数据库

我们使用mongodb数据库,在koa2中使用mongoose这个库来管理整个数据库的操作。

根目录下新建config文件夹,新建mongo.js

// config/mongo.js const mongoose = require('mongoose').set('debug', true); const options = { autoReconnect: true } // username 数据库用户名 // password 数据库密码 // localhost 数据库ip // dbname 数据库名称 const url = 'mongodb://username:password@localhost:27017/dbname' module.exports = { connect: ()=> { mongoose.connect(url,options) let db = mongoose.connection db.on('error', console.error.bind(console, '连接错误:')); db.once('open', ()=> { console.log('mongodb connect suucess'); }) } } 复制代码

把mongodb配置信息放到config.json中统一管理

const mongoConf = require('./config/mongo'); mongoConf.connect(); 复制代码

... 服务端具体接口实现就不详细介绍了,就是对页面的增删改查,和用户的登录注册难度不大

启动运行启动前端

npm run dev-client 复制代码启动服务端

npm run dev-server 复制代码

注意: 如果没有生成过引擎模板js文件的,需要先编辑引擎模板,否则预览页面加载页面引擎.js 404报错

编译engine.js模板引擎

npm run lib:h5-swiper

上一页123末页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.