<template>

  <vue-form v-if="!unform" :class="{'form-inline':inline}" :state="state" v-model="state"  @submit.prevent="formMethod" >

    <slot></slot>

  </vue-form>

  <div class="form" v-else>

    <slot></slot>

  </div>

</template>

<script>

export default {

  name: 'vbaForm',

  provide() {

    return {

      vbaForm: this

    }

  },

  props: {

    inline: Boolean,

    unform: {

      type: Boolean,

      default: false

    },

    state: {},

    formMethod: Function

  },

  methods: {

    fieldClassName(field) {

      if (!field) {

        return ''

      }

      if ((field.$touched || field.$submitted) && field.$valid) {

        return 'has-success'

      }

      if ((field.$touched || field.$submitted) && field.$invalid) {

        return 'has-error'

      }

    }

  }

}

</script>

<style lang="less">

@import (reference) '../../../assets/lib/css.less';

form,

div {

  .form-group:last-child {

    .mgb(0);

  }

}

</style>

<template lang="pug">

  validate.form-group.required-field.row.mb-4(v-if="!!isForm",auto-label,:class='vbaForm.fieldClassName(`${$parent.formstate}[${prop}]`)')

    label.col.col-form-label(:class="{'text-right':right}",v-if="!!col||col===12") {{label}}

    cols(:col="col",:size="size")

        slot

        field-messages.help-block.text-danger.position-absolute.mb-0(:name='prop', show='$touched || $submitted',tag="section")

          div(v-for="(item,index) in messages",:slot="item.slot") {{item.label}}

  rows.form-group(v-else)

    label.col.col-form-label(:class="{'text-right':right}",v-if="!!col||col===12") {{label}}

    cols.d-flex.align-items-center(:col="col",:size="size")

        slot

</template>

<script>

import { rows, cols } from '@/components/layout'

export default {

  name: 'formItem',

  components: {

    rows,

    cols

  },

  inject: ['vbaForm'],

  model:{

    prop:'messages'

  },

  props: {

    messages:[Array],

    label: String,

    right: {

      type: Boolean,

      default: false

    },

    col: [Number, Array, String],

    size: [String, Array],

    prop: String,

    unForm:{

      type:Boolean,

      default:false

    }

  },

  data() {

    return {}

  },

  computed: {

    isForm() {

      return !this.unForm?!this.vbaForm.unform && this.prop:true

    }

  }

}

</script>

<template lang="pug">

  section#authentication.uc-panel

    .d-flex.mt-4

      step.w-50.mx-auto(:names="stepData",:current="step")

    .d-flex.w-500.mx-auto.my-3

      panel.w-100(:stype="step===3?2:3")

        Forms(:state="formstate",:formMethod="sendPassword",ref="sendinfo",v-if="step!=3")

            template(v-if="step===1")

                FormItem(:label="getType==='phone'?'您的手机：':'您的邮箱'",right,:col="9",:unForm="true")

                    .input-group

                        input.form-control-plaintext(type="text",readonly,:name="getType",:value="getType==='phone'?$store.state.user.user.phone:$store.state.user.user.email")

                        span.input-group-btn

                            timer.btn.btn-sm.btn-secondary(:begin="timer",:second="time",@clevent='getSmsCode')

                FormItem(label="您的验证码：",:col="9",right,prop="code",key="code",v-model="rules.code")

                    input.form-control(type='text',name='code',autocomplete="off",required,v-model.lazy='sendModal.code')

                FormItem(:col="9")

                    button.btn.btn-sm.btn-info.px-3(type="submit") 下一步

            template(v-else-if="step===2")

                FormItem(label="旧密码：",:col="9",right,prop="oldpassword",key="oldpassword",v-model="rules.oldpassword")

                    input.form-control(type='password',name='oldpassword',required,v-model.lazy='sendModal.oldpassword')

                |

                FormItem(label="您的新密码：",:col="9",right,prop="password",key="password",v-model="rules.password")

                    input.form-control(type='password',password-strength,name='password',required,v-model.lazy='sendModal.password')

                |

                FormItem(label="重复新密码：",:col="9",right,prop="confirmPassword",key="confirmPassword",v-model="rules.confirmPassword")

                    input.form-control(type='password',:matches="sendModal.password",name='confirmPassword',required,v-model.lazy='sendModal.confirmPassword')                 

                |

                FormItem(:col="9")

                    button.btn.btn-sm.btn-info.px-3(type="submit") 下一步

</template>

<script>

const sendef = {

  code: '',

  oldpassword: '',

  password: '',

  confirmPassword: ''

}

import { card, cardbody } from '@/components/comp/cards'

import step from '@/components/comp/step'

import icons from '@/components/comp/icon'

import panel from '@/view/layout/panel'

import status from '@/components/comp/status'

import timer from '@/components/plug/timer'

import { form, formItem } from '@/components/comp/form'

export default {

  name: 'viewAuth',

  components: {

    step,

    panel,

    status,

    icons,

    Forms: form,

    FormItem: formItem,

    card,

    cardbody,

    timer

  },

  data() {

    return {

      stepData: ['身份验证', '修改密码', '完成'],

      step: 1,

      time: 120,

      timer: false,

      formstate: {},

      sendModal: _.cloneDeep(sendef),

      rules:{

          code:[{

              slot:'required',

              label:'请输入您收到的验证码'

          }],

          oldpassword:[{

              slot:'required',

              label:'请输入您的旧密码'              

          }],

          password:[{

              slot:'required',

              label:'请输入您的新密码'

          },{

              slot:'password-strength',

              label:' 密码需包含大小写字母数字，且必须大于8位！'

          }],

          confirmPassword:[{

              slot:'required',

              label:'请重复您的新密码'

          },{

              slot:'matches',

              label:'确认密码与上一次输入不匹配'

          }]

      }

    }

  },

  computed:{

      getType(){

          return this.$route.query.changeBy

      }

  },

  methods: {

    userinfo() {

      const userinfo = this.$store.state.user.user

      this.sendModal.phone = userinfo.phone

      this.sendModal.email = userinfo.email

    },

    getSmsCode() {

      api.getSmsCode(this.userData.phone).then(res => {



      })

    },

    next(e) {

        this.step =2

        this.formstate._reset();

    },

    sendPassword(e) {

      if (!!this.formstate.$valid) {

        if (this.step === 1) {

          this.step = 2

          this.formstate._reset();

        }

      }

    }

  },

  mounted() {

    this.userinfo()

  }

}

</script>

<style lang="less">

#authentication {

  .step-round > li > a:after {

    top: -34%;

    height: 3px;

  }

}

</style>

<template>

  <vue-form v-if="!unform" :class="{'form-inline':inline}" :state="state" v-model="state"  @submit.prevent="formMethod" >

    <slot></slot>

  </vue-form>

  <div class="form" v-else>

    <slot></slot>

  </div>

</template>

<script>

export default {

  name: 'vbaForm',

  provide() {

    return {

      vbaForm: this

    }

  },

  props: {

    inline: Boolean,

    unform: {

      type: Boolean,

      default: false

    },

    state: {},

    formMethod: Function

  },

  methods: {

    fieldClassName(field) {

      if (!field) {

        return ''

      }

      if ((field.$touched || field.$submitted) && field.$valid) {

        return 'has-success'

      }

      if ((field.$touched || field.$submitted) && field.$invalid) {

        return 'has-error'

      }

    }

  }

}

</script>

<style lang="less">

@import (reference) '../../../assets/lib/css.less';

form,

div {

  .form-group:last-child {

    .mgb(0);

  }

}

</style>

<template lang="pug">

  validate.form-group.required-field.row.mb-4(v-if="!!isForm",auto-label,:class='vbaForm.fieldClassName(`${$parent.formstate}[${prop}]`)')

    label.col.col-form-label(:class="{'text-right':right}",v-if="!!col||col===12") {{label}}

    cols(:col="col",:size="size")

        slot

        field-messages.help-block.text-danger.position-absolute.mb-0(:name='prop', show='$touched || $submitted',tag="section")

          div(v-for="(item,index) in messages",:slot="item.slot") {{item.label}}

  rows.form-group(v-else)

    label.col.col-form-label(:class="{'text-right':right}",v-if="!!col||col===12") {{label}}

    cols.d-flex.align-items-center(:col="col",:size="size")

        slot

</template>

<script>

import { rows, cols } from '@/components/layout'

export default {

  name: 'formItem',

  components: {

    rows,

    cols

  },

  inject: ['vbaForm'],

  model:{

    prop:'messages'

  },

  props: {

    messages:[Array],

    label: String,

    right: {

      type: Boolean,

      default: false

    },

    col: [Number, Array, String],

    size: [String, Array],

    prop: String,

    unForm:{

      type:Boolean,

      default:false

    }

  },

  data() {

    return {}

  },

  computed: {

    isForm() {

      return !this.unForm?!this.vbaForm.unform && this.prop:true

    }

  }

}

</script>

<template lang="pug">

  section#authentication.uc-panel

    .d-flex.mt-4

      step.w-50.mx-auto(:names="stepData",:current="step")

    .d-flex.w-500.mx-auto.my-3

      panel.w-100(:stype="step===3?2:3")

        Forms(:state="formstate",:formMethod="sendPassword",ref="sendinfo",v-if="step!=3")

            template(v-if="step===1")

                FormItem(:label="getType==='phone'?'您的手机：':'您的邮箱'",right,:col="9",:unForm="true")

                    .input-group

                        input.form-control-plaintext(type="text",readonly,:name="getType",:value="getType==='phone'?$store.state.user.user.phone:$store.state.user.user.email")

                        span.input-group-btn

                            timer.btn.btn-sm.btn-secondary(:begin="timer",:second="time",@clevent='getSmsCode')

                FormItem(label="您的验证码：",:col="9",right,prop="code",key="code",v-model="rules.code")

                    input.form-control(type='text',name='code',autocomplete="off",required,v-model.lazy='sendModal.code')

                FormItem(:col="9")

                    button.btn.btn-sm.btn-info.px-3(type="submit") 下一步

            template(v-else-if="step===2")

                FormItem(label="旧密码：",:col="9",right,prop="oldpassword",key="oldpassword",v-model="rules.oldpassword")

                    input.form-control(type='password',name='oldpassword',required,v-model.lazy='sendModal.oldpassword')

                |

                FormItem(label="您的新密码：",:col="9",right,prop="password",key="password",v-model="rules.password")

                    input.form-control(type='password',password-strength,name='password',required,v-model.lazy='sendModal.password')

                |

                FormItem(label="重复新密码：",:col="9",right,prop="confirmPassword",key="confirmPassword",v-model="rules.confirmPassword")

                    input.form-control(type='password',:matches="sendModal.password",name='confirmPassword',required,v-model.lazy='sendModal.confirmPassword')                 

                |

                FormItem(:col="9")

                    button.btn.btn-sm.btn-info.px-3(type="submit") 下一步

</template>

<script>

const sendef = {

  code: '',

  oldpassword: '',

  password: '',

  confirmPassword: ''

}

import { card, cardbody } from '@/components/comp/cards'

import step from '@/components/comp/step'

import icons from '@/components/comp/icon'

import panel from '@/view/layout/panel'

import status from '@/components/comp/status'

import timer from '@/components/plug/timer'

import { form, formItem } from '@/components/comp/form'

export default {

  name: 'viewAuth',

  components: {

    step,

    panel,

    status,

    icons,

    Forms: form,

    FormItem: formItem,

    card,

    cardbody,

    timer

  },

  data() {

    return {

      stepData: ['身份验证', '修改密码', '完成'],

      step: 1,

      time: 120,

      timer: false,

      formstate: {},

      sendModal: _.cloneDeep(sendef),

      rules:{

          code:[{

              slot:'required',

              label:'请输入您收到的验证码'

          }],

          oldpassword:[{

              slot:'required',

              label:'请输入您的旧密码'              

          }],

          password:[{

              slot:'required',

              label:'请输入您的新密码'

          },{

              slot:'password-strength',

              label:' 密码需包含大小写字母数字，且必须大于8位！'

          }],

          confirmPassword:[{

              slot:'required',

              label:'请重复您的新密码'

          },{

              slot:'matches',

              label:'确认密码与上一次输入不匹配'

          }]

      }

    }

  },

  computed:{

      getType(){

          return this.$route.query.changeBy

      }

  },

  methods: {

    userinfo() {

      const userinfo = this.$store.state.user.user

      this.sendModal.phone = userinfo.phone

      this.sendModal.email = userinfo.email

    },

    getSmsCode() {

      api.getSmsCode(this.userData.phone).then(res => {



      })

    },

    next(e) {

        this.step =2

        this.formstate._reset();

    },

    sendPassword(e) {

      if (!!this.formstate.$valid) {

        if (this.step === 1) {

          this.step = 2

          this.formstate._reset();

        }

      }

    }

  },

  mounted() {

    this.userinfo()

  }

}

</script>

<style lang="less">

#authentication {

  .step-round > li > a:after {

    top: -34%;

    height: 3px;

  }

}

</style>

var expressJwt = require("express-jwt");

// jwt中间件

app.use(expressJwt({

    secret: "yousecret"//加密密钥，可换

}).unless({

    path: ["/api/login","/api/addUser","/api/test"]//添加不需要token验证的路由 

}));

      dao.query(UserSQL.isName, paramA).then(result => {

        user = result[0];

        if(cryptPwd(param.password, user.salt)[1] === user.password) {

          let authToken = jwt.sign({

            name: user.userName,

            password: user.password,

            group: user.group,

            salt: '123'

          }, "secret", {

            expiresIn: "10 days"

          });

          res.json({

            code: 200,

            msg: '登录成功',

            token: authToken

          });

        } else {

          res.json({

            code: 250,

            msg: '用户名或密码不正确'

          })

        };

      })

感谢戏子大爷

// 导入MySQL模块

const mysql = require('mysql');

const dbConfig = require('../db/DBConfig');

// 使用DBConfig.js的配置信息创建一个MySQL连接池

const pool = mysql.createPool(dbConfig.mysql);

module.exports = {

  query: function (sql,args = []) {

    return new Promise((resolve, reject) => {

      // 获取数据库连接

      pool.getConnection((err, connection) => {

        if (err) {

          // 错误返回－ 自己可以另外带参数，判断错误类型

          reject(err)

        } else {

          // 执行数据查询

          connection.query(sql, args, (err, res) => {

            if (err) {

              // 错误返回－ 自己可以另外带参数，判断错误类型

              reject(err)

            } else {

              // 查询成功

              resolve(res);

            }

          })

        }

      })

    })

  }

}

const jwt = require('jsonwebtoken')



exports._jwt = jwt



exports.sign = (payload, key, opts) => {

  opts = opts || {}

  return new Promise((resolve, reject) => {

    jwt.sign(payload, key, opts, (err, token) => {

      if (err || !token) return reject(err)

      resolve(token)

    })

  })

}



exports.verify = (token, key, opts) => {

  opts = opts || {}

  return new Promise((resolve, reject) => {

    jwt.verify(token, key, opts, (err, verified) => {

      if (err) return reject(err)

      resolve(verified)

    })

  })

}

module.exports = {

  queryAll(db, limit = '') {

    return 'SELECT * FROM ' + db + ' limit ' + limit

  },

  insertAll(db, num) {

    return 'INSERT INTO ' + db + ' VALUES ("id",' + Array(num).fill('?').join() + ')'

  },

  delAll(db, id) {

    return 'DELETE FROM ' + db + ' WHERE id=' + id

  },

  next(db, id, num) {

    return 'select * from ' + db + 'where' + id + ' = (select max(' + id + ') from ' + db + ' where ' + id + ' < ' + num + ' )'

  },

  prev(db, id, num) {

    return 'select * from ' + db + 'where' + id + ' = (select min(' + id + ') from ' + db + ' where ' + id + ' > ' + num + ' )'

  },

  insertOnly(db,num){

  	return 'insert ignore '+db+ ' VALUES ("id",' + Array(num).fill('?').join() + ')'

  }

}

数据库名为dbname,表名table,字段名fieldname.

ALTER TABLE dbname.table ADD UNIQUE (fieldname);

<template lang="pug">

	input-group.pull-right.copyig(right, btn)

		textarea.form-control(v-model='val', slot='input',ref='sendinfo')

		button.btn.btn-ces(slot='right', @click="copyText",:disabled='showBtn') {{texts}}

</template>

props:{

	val:String,

	timer:{

		type:Number,

		default:2000

	}

},

data(){

	return{

		texts:'点击复制',

		showBtn:false

	}

},

methods:{

	setIg(){

		Object.assign(this.$data, this.$options.data())				

	},

	copyText(){

		let def = this.$refs.sendinfo;

		def.select()

		document.execCommand("Copy");

		this.texts='复制成功';

		this.showBtn = true;

		setTimeout(this.setIg,this.timer)

	}

}

vue-devtools 是一款开发vue 应用时不可或缺的超好用的插件，且它提供了多个浏览器的支持！chrome 的应用市场可以直接搜索下载安装，但是您要是打不开应用市场（你能正常的打开算我输）可以使用如下的方法