cms之day1(mongoose、express、vue、axios)

day1

1. vue cli 与ant design vue之前端建设

1. vue cli项目搭建

vue create demo

2. 使用ant deisign vue

1. 官网

2. 需要配置less时出现问题.bezierEasingMixin() 传送门

3. axios is not defined

cnpm i axios  
// main.js
import axios from 'axios'
Vue.prototype.$axios = axios

//使用
this.$axios
        .get('/login')
        .then(res => {
          console.log(res)
          this.verify = res.data
        })
        .catch(err => {
          console.error(err)
        })

4. localhost 8080接口访问3000后台，因为端口不同，同源协议生效，导致报错。

// vue.config.js 没有自行创建
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

// main.js
axios.defaults.baseURL = '/api'

// 使用
this.$axios
        .get('/login')
        .then(res => {
          console.log(res)
          this.verify = res.data
        })
        .catch(err => {
          console.error(err)
        })

5. axios传参post后台接收不到，前端修改如下，后台通过req.query获取

this.$axios({
        method: 'post',
        url: '/login/doLogin',
        params: {
          username: this.form.name,
          psw: this.$md5(this.form.psw),
          captcha: this.form.captcha
        },
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        }
      }).then(function (res) {
        console.log(res.data)
      })

6. 路由router使用

​ 传送门

2. npm 应用程序生成器之后台开发

1. 应用程序生成器

express --view=ejs expressGenerator
nodemon .\bin\www

2. app.js配置

var createError = require('http-errors')
var express = require('express')
const ejs = require('ejs')
const session = require('express-session')
const config = require('./config/config')
var path = require('path')
var logger = require('morgan')

const admin = require('./routes/admin/index')
const login = require('./routes/login')

var app = express()

// 配置模板引擎
app.engine('html', ejs.__express)
app.set('view engine', 'html')

app.use(logger('dev'))
app.use(express.urlencoded({ extended: false }))
app.use(express.static('static'))
// 配置中间件
app.use(
  session({
    secret: 'keyboard cat', // 服务器端生成session的签名
    name: 'captcha', // 修改session对应的cookie的名称
    resave: false, // 强制保存session即使它没有变化
    saveUninitialized: true, // 强制将未初始化的session存储
    cookie: {
      maxAge: 1000 * 60,
      secure: false // true表示只有https协议才能访问
    },
    rolling: true // 在每次请求时强行设置cookie，这将重置cookie过期时间（默认：false）
  })
)

// app.use('/' + config.adminPath, admin)
app.use('/', admin)
app.use('/login', login)

// 绑定全局模板变量
// app.locals.adminPath = config.adminPath
module.exports = app

3. svg-captcha使用

cnpm i svg-captcha --save
var svgCaptcha = require('svg-captcha')


router.get('/', function (req, res, next) {
  // 此处显示的是加减法运算哦
  var captcha = svgCaptcha.createMathExpr({
    width: 100,
    height: 40,
    background: 'white'
  })
  // 保存验证码
  req.session.captcha = captcha.text
  res.type('svg')
  res.status(200).send(captcha.data)
  console.log(captcha)
})

// 此处不知为何 vue前端src无法显示图片 使用v-html
<div v-html='verify'></div>
cha.text
  res.type('svg')
  res.status(200).send(captcha.data)
  console.log(captcha)
})

// 此处不知为何 vue前端src无法显示图片 使用v-html
<div v-html='verify'></div>