vue axios node.js ---＞cms

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使用

​ 传送门

7.Cannot read property ‘$router‘ of undefined

​ 传送门

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>

day2

1.vue ant-design前端

1. vue router子路由

const routes=[
    {path:"/demo1/:id",component:demo1,props:true},//props为true时，可以将动态路由的值传递给相应的组件
    {path:"/demo2",component:demo2},
    //{path:"/demo3",component:demo3,name:"test"},//name属性是给路由起别名，方便用js的方式去跳转
    {path:"/demo3/:id",component:demo3,name:"test"},//name属性是给路由起别名，方便用js的方式去跳转
    {path:"/demo4",component:demo4,children:[
        {path:"demo4-1",component:demo4a}
    ]},//name属性是给路由起别名，方便用js的方式去跳转
]

2. router 下的name属性用法

​ 传送门

3. vue项目使用debugger

​ 在package.json\eslintConfig\rules里

  "rules": {
      "no-debugger": "off",
      "no-console": "off"
    }

2. node 应用程序生成器

1. mongoose查询返回部分字段

  const result = await ManagerModel.find({}, ['_id', 'username', 'email', 'mobile', 'status'])

day3

1. vue ant-design前端

1. 封装post、get请求

2. axios 请求封装、拦截器

// request.js
import axios from 'axios'
import qs from 'qs'

const showStatus = status => {
  let message = ''
  switch (status) {
    case 400:
      message = '请求错误(400)'
      break
    case 401:
      message = '未授权，请重新登录(401)'
      break
    case 403:
      message = '拒绝访问(403)'
      break
    case 404:
      message = '请求出错(404)'
      break
    case 408:
      message = '请求超时(408)'
      break
    case 500:
      message = '服务器错误(500)'
      break
    case 501:
      message = '服务未实现(501)'
      break
    case 502:
      message = '网络错误(502)'
      break
    case 503:
      message = '服务不可用(503)'
      break
    case 504:
      message = '网络超时(504)'
      break
    case 505:
      message = 'HTTP版本不受支持(505)'
      break
    default:
      message = `连接出错(${status})!`
  }
  return `${message}，请检查网络或联系管理员！`
}

const service = axios.create({
  // 联调
  baseURL: process.env.NODE_ENV === 'production' ? `/` : '/api',
  headers: {
    get: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    },
    post: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    }
  },
  // 是否跨站点访问控制请求
  withCredentials: true,
  timeout: 30000,
  transformRequest: [
    data => {
      data = qs.stringify(data)
      return data
    }
  ],
  validateStatus() {
    // 使用async-await，处理reject情况较为繁琐，所以全部返回resolve，在业务代码中处理异常
    return true
  }
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    return config
  },
  error => {
    // 错误抛到业务代码
    error.data = {}
    error.data.msg = '服务器异常，请联系管理员！'
    return Promise.resolve(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    const status = response.status
    let msg = ''
    if (status < 200 || status >= 300) {
      // 处理http错误，抛到业务代码
      msg = showStatus(status)
      if (typeof response.data === 'string') {
        response.data = { msg }
      } else {
        response.data.msg = msg
      }
    }
    return response
  },
  error => {
    // 错误抛到业务代码
    error.data = {}
    error.data.msg = '请求超时或服务器异常，请检查网络或联系管理员！'
    return Promise.resolve(error)
  }
)

export default service

// api.js
import service from './request'

//login page to show captcha
export const getCaptcha = params => service.get('/login', params)
export const postLoginInfo = params => service.post('/login/doLogin', params)

// managerList
export const getManageList = params => service.get('/', params)

2. qs.stringify()与JSON.stringify()序列化区别

qs.stringify()将对象 序列化成URL的形式，以&进行拼接。
JSON是正常类型的JSON

let ObjectDemo = {name:'weixin',age:12};
 qs.stringify(ObjectDemo)
// 'name=weixin&age=12'
JSON.stringify(ObjectDemo)
// '{"name":"weixin","age":12}'

3.transformRequest和transformResponse

 transformRequest:表示允许在向服务器发送前，修改请求数据
 1. 只能用在 ‘PUT’, ‘POST’ 和 ‘PATCH’ 这几个请求方法
 2. 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
 transformResponse：在传递给 then/catch 前，允许修改响应数据

= {name:‘weixin’,age:12};
qs.stringify(ObjectDemo)
// ‘name=weixin&age=12’
JSON.stringify(ObjectDemo)
// ‘{“name”:“weixin”,“age”:12}’

###### 3.` transformRequest`和`transformResponse`

transformRequest:表示允许在向服务器发送前，修改请求数据

1. 只能用在 ‘PUT’, ‘POST’ 和 ‘PATCH’ 这几个请求方法
2. 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
   transformResponse：在传递给 then/catch 前，允许修改响应数据