模板引擎
ejs https://github.com/eggjs/egg-view-ejs
$ npm i egg-view-ejs
语法参考
修改配置
// {app_root}/config/plugin.js exports.ejs = { enable: true, package: 'egg-view-ejs', }; // {app_root}/config/config.default.js config.view = { mapping: { '.html': 'ejs', }, };
新建文件
app/view/index.html
<%# 变量 #%> <%=res.name%> <%=res.age%> <%# for循环 #%> <% for(var i=0; i<list.length; i++){ %> <p><%=list[i]%></p> <% } %>
控制器中渲染
async index() { const { ctx } = this; const res = await ctx.service.product.index(); // ctx.body = res; await ctx.render('index.html', { res, list: ['red', 'green', 'blue'] }) }
静态资源
app/public目录树
app ├── public ├── css │ └── main.css ├── img │ └── demo.png └── js └── main.js
<!-- 引入css文件 --> <link rel="stylesheet" href="/public/css/main.css"> <!-- 引入图片资源 --> <img src="/public/img/demo.png" alt=""> <!-- 引入js文件 --> <script src="/public/js/main.js"></script>
mysql插件
npm i --save egg-mysql
修改配置
// config/plugin.js exports.mysql = { enable: true, package: 'egg-mysql', }; // config/config.default.js config.mysql = { // 单数据库信息配置 client: { // host host: '127.0.0.1', // 端口号 port: '3306', // 用户名 user: 'root', // 密码 password: '123456', // 数据库名 database: 'data', }, // 是否加载到 app 上，默认开启 app: true, // 是否加载到 agent 上，默认关闭 agent: false, };
查询
async index() { const { ctx, app } = this; const res = await app.mysql.select("article"); console.log(res); }
前端开发
1、脚手架 @vue/cli
https://cli.vuejs.org/zh/guide/installation.html
$ cnpm install -g @vue/cli $ vue -V 3.12.0 $ vue --help $ vue create client $ cd client $ npm run serve
http://localhost:8080/
2、前端组件库 vant
https://youzan.github.io/vant/#/zh-CN/quickstart
$ npm i vant -S $ npm i babel-plugin-import -D
在 .babelrc 中添加配置
{ "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ] }
App.vue引入vant组件
<template> <div id="app"> <van-button type="primary">按钮组件</van-button> </div> </template> <script> import { Button } from 'vant'; export default { name: 'app', components: { [Button.name]: Button } } </script>
3、路由vue-router
cnpm i vue-router --save
4、处理时间
cnpm i moment --save
// 后端保存之前 const moment = require('moment'); const create_time = moment().format('YYYY-MM-DD HH:mm:ss'); // 2019-10-13 22:29:23 //前端展示之前 import momemt from 'moment'; this.list = res.data.map(item=>{ if(item.create_time){ item.create_time = moment(item.create_time).format('YYYY-MM-DD HH:mm:ss'); } return item; });
5、客户端跨域请求
vue.config.js
module.exports = { // 处理跨域请求 devServer: { proxy: { '/article': { target: "http://127.0.0.1:7001/", ws: true, // 允许websockt服务 changeOrigin: true // 开启虚拟服务器，请求代理服务器 } } } }
