快疯了

快疯了 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

前端工程师

个人动态

快疯了 发布了文章 · 2018-12-25

Flutter-WeChat -- 学习Flutter期间仿做的一个微信App

Flutter-WeChat

有一天突然头脑一热,就想用Flutter模仿一个微信.

然后在网上随便找到了张微信的Ui设计图.

App主要都是静态页面与动态交互,没有请求接口.

后续会更新页面与交互,有问题还望各位指出...

觉得对你有帮助的话,还希望客官star一下下!

感谢您的参观!觉得不错的话给个Star吧!!!(个人学习作品,无商业盈利目的,侵权必删)


我没有Mac电脑所以我不能确定项目能不能在Mac上面运行!

I don't have a Mac, so I'm not sure the project will work on a Mac!


github地址

flutter环境

> flutter --version 

Flutter 1.10.7 • channel beta • https://github.com/flutter/flutter.git
Framework • revision e70236e36c (7 个月之前) • 2019-10-02 09:32:30 -0700
Engine • revision 9e6314d348
Tools • Dart 2.6.0 (build 2.6.0-dev.4.0 1103600280)
> flutter doctor 

[√] Flutter (Channel beta, v1.10.7, on Microsoft Windows [Version 10.0.16299.1481], locale zh-CN)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[√] Android Studio (version 3.2)
[√] Connected device (1 available)

预览图

image
image
image
image
image
image

image
image
image
image
image
image

查看原文

赞 9 收藏 7 评论 0

快疯了 赞了回答 · 2018-08-15

vue v-for 循环里面不能调用外部data里面的字段

请把问题描述的清楚一些

关注 3 回答 3

快疯了 发布了文章 · 2018-08-10

全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客

koa2+mysql+vue+vant 构建简单版移动端博客

具体内容展示

开始正文

github地址
<br/>

觉得对你有帮助的话,可以star一下^_^


必须安装:<br/>
mysql <br/>
node.js

vue-cli<br/>

目录结构


<br/><br/>

代码步骤

<br/>
app 目录下 打开 node 运行vue-cli vue init webpack 新建Vue项目<br/>
安装以下依赖模块:
<br/>

"axios": "^0.18.0",
"js-cookie": "^2.2.0",
"js-md5": "^0.7.3",
"nprogress": "^0.2.0",
"vant": "^1.1.15",
"vue": "^2.5.2",
"vue-router": "^3.0.1"


详细具体看github源码



koa2 目录下 打开 node 运行 npm init 编写信息<br/>
安装以下依赖模块: <br/>

"jsonwebtoken": "^8.3.0",  // 生成token
"koa-bodyparser": "^4.2.1", // 解析requeset body
"koa-cors": "^0.0.16", // koa跨域
"koa-router": "^7.4.0", // koa-router
"koa-static": "^5.0.0", // koa静态文件
"koa2": "^2.0.0-alpha.7", // koa2
"mysql": "^2.16.0", // mysql
"uuid": "^3.3.2" // 生成userId

<br/>

在 koa2/config.js 进行 mysql 链接配置

// config.js  数据库配置

    module.exports = {  // mysql 配置
      mysql: {
        host: 'localhost', // 地址
        user: 'root', // 用户账号
        password: '', // 密码
        database: 'test' // test库
      },
      port: 3001 // 监听端口
    }

编写 sql 配置

在 koa2/mysql.js 进行编写 sql 语句

// mysql.js   编写sql语句
    
    const mysql = require('mysql');
    const config = require('./config.js');
    
    var pool = mysql.createPool(config.mysql);
    
    const query = function (sql, val) {
      return new Promise((resolve, reject) => {
        pool.getConnection(function (err, connection) {
          if (err) {
            reject(err)
          } else {
            connection.query(sql, val, (err, res) => {
              if (err) {
                reject(err)
              } else {
                resolve(res)
              }
              connection.release();
            })
          }
        })
      })
    }

    const createTable = (sql) => {
      query(sql, [])
    }
    
    const usersTable = `CREATE TABLE IF NOT EXISTS users (
       id VARCHAR(36) NOT NULL,
       userName VARCHAR(16) NOT NULL,
       passWord VARCHAR(16) NOT NULL,
       avator VARCHAR(50) NOT NULL,
       createTime VARCHAR(50) NOT NULL,
       PRIMARY KEY (id) 
    )`;
    
    const postsTable = `CREATE TABLE IF NOT EXISTS posts (
       id INT NOT NULL AUTO_INCREMENT,
       userName VARCHAR(100) NOT NULL,
       userId VARCHAR(40) NOT NULL,
       avator VARCHAR(100) NOT NULL,
       title VARCHAR(100) NOT NULL,
       content TEXT(0) NOT NULL,
       hot VARCHAR(40) NOT NULL,
       comments VARCHAR(40) NOT NULL,
       createTime VARCHAR(100) NOT NULL,
       PRIMARY KEY (id) 
    )`;
    
    const commentTable = `CREATE TABLE IF NOT EXISTS comment (
       id INT NOT NULL AUTO_INCREMENT,
       userName VARCHAR(100) NOT NULL,
       content TEXT(0) NOT NULL,
       postId VARCHAR(40) NOT NULL,
       avator VARCHAR(100) NOT NULL,
       createTime VARCHAR(100) NOT NULL,
       PRIMARY KEY (id) 
    )`;
    
    
    // 建表
    createTable(usersTable) // 用户表
    createTable(postsTable) // 文章表
    createTable(commentTable) // 评论表
    
    const insetUser = (val) => { // 注册
      let _sql = `INSERT INTO users (id, userName, passWord, avator, createTime) VALUES (?,?,?,?,?)`
      return query(_sql, val)
    }
    
    const findUser = (val) => { // 查找所有User
      let _sql = `SELECT * FROM users WHERE userName = '${val}'`
      return query(_sql)
    }
    
    const createPosts = (val) => { // 新建posts
      let _sql = `INSERT INTO posts (userName, userId, avator, title, content, hot, comments, createTime) VALUES (?,?,?,?,?,?,?,?)`
      return query(_sql, val)
    }
    
    const updatePosts = (val) => { // 修改posts
      let _sql = `UPDATE posts SET title=?, content=? WHERE id=?`
      return query(_sql, val)
    }
    
    const updatePostsComment = (val) => { // 修改posts评论数量
      let _sql = `UPDATE posts SET comments=? WHERE id=?`
      return query(_sql, val)
    }
    
    const updatePostsHot = (val) => { // 修改posts查看人数
      let _sql = `UPDATE posts SET hot=? WHERE id=?`
      return query(_sql, val)
    }
    
    const postsList = (key, pg, size) => { // 查找所有posts
      let _sql = `SELECT * FROM posts ${ key ? "WHERE title LIKE '%"+key+"%' " : ' '}ORDER BY createTime DESC limit ${pg * size} , ${size}`
      return query(_sql)
    }
    
    const postDetail = (val) => { // 根据ID 查询 postsDetail
      let _sql = `SELECT * FROM posts WHERE id = '${val}'`
      return query(_sql)
    }
    
    const commentList = (val) => { // 获取留言列表
      let _sql = `SELECT * FROM comment WHERE postId = '${val}' ORDER BY createTime DESC`
      return query(_sql)
    }
    
    const createComment = (val) => { // 添加 留言
      let _sql = `INSERT INTO comment (userName, content, postId, avator, createTime) VALUES (?,?,?,?,?)`
      return query(_sql, val)
    }
    
    module.exports =  {
      insetUser,
      findUser,
      createPosts,
      postsList,
      updatePosts,
      updatePostsComment,
      updatePostsHot,
      postDetail,
      createComment,
      commentList
    }

编写 koa2 配置

在 koa2/app.js 进行编写 koa2 配置

// app.js

    const path = require('path')
    const Koa = require('koa2');
    const router = require('koa-router');
    var cors = require('koa-cors');
    const bodyParser = require('koa-bodyparser');
    const config = require('./config.js');
    const server = require('koa-static');
    const jwt = require('jsonwebtoken')
    
    require('./mysql.js');
    
    const app = new Koa();
    
    app.use(server(
      path.join(__dirname , './public')
    )) // 设置静态文件
    
    app.use(cors({
          origin: 'http://localhost:8080',  // 允许 loclhost:8080 访问
          exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
          maxAge: 5,
          credentials: true,
          allowMethods: ['GET', 'POST'],
          allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
      })
    ); // 设置跨域
    
    app.use(bodyParser({
      formLimit: '1mb'
    })) // ctx body 中间件
    
    app.use(require('./routers/signUp.js').routes()) // 注册
    app.use(require('./routers/signIn.js').routes()) // 登录
    
    app.use(require('./routers/createPosts.js').routes()) // 新建文章
    app.use(require('./routers/postsList.js').routes()) // 搜索文章
    app.use(require('./routers/postDetail.js').routes()) // 文章detail
    app.use(require('./routers/updatePosts.js').routes()) // 修改文章
    
    app.use(require('./routers/createComment.js').routes()) // 添加留言
    app.use(require('./routers/commentList.js').routes()) // 获取留言
    
    app.listen(config.port) // 监听端口
    
    console.log('listen in localhost:' + config.port)

分析登录注册

详细分析一下 登录 注册


登录 -> 有账号 -> 校验密码 -> 成功 -> 返回Token



登录 -> 没有账号 -> 注册 -> 判断是否有账号 -> 没有-> sql注册

///////////////////-> 注册 -> 有账号 -> 去登录

注册<br/>

signUp.js

// signUp.js

const router = require('koa-router')();
const uuidV1 = require('uuid/v1'); // 生成13位 userId
const userModel = require('../mysql.js');
const fs = require('fs'); // 文件操作

// 注册
router.post('/signUp', async (ctx, next) => {
// post请求 从body中获取注册参数
  let user = {
    userName: ctx.request.body.userName,
    passWord: ctx.request.body.passWord,
    repeatPass: ctx.request.body.repeatPass,
    avator: ctx.request.body.avator
  }

  await userModel.findUser(user.userName).then(async (res) => {
    if (res.length) { // length > 1 说明 表中有数据
      try {
        throw Error('用户已存在')
      } catch (err) {
        console.log(err)
      }
      ctx.body = {
        state: 0,
        msg: '用户已存在!',
        data: []
      }
    } else if (!user.userName || user.passWord !== user.repeatPass) {
      ctx.body = {
        state: 0,
        msg: '密码输入错误',
        data: []
      }
    } else {  // 否者没有注册
      //处理上传头像
      let base64Data = user.avator.replace(/^data:image\/\w+;base64,/, "");
      let dataBuffer = new Buffer(base64Data, 'base64');
      let getName = Number(Math.random().toString().substr(3)).toString(36) + Date.now()

      // 上传图片到 public/images 文件夹中
      await fs.writeFile('./public/images/' + getName + '.png', dataBuffer, err => {
          if (err) {
            console.log(err);
            return false
          }
          console.log('头像上传成功') 
      });  

      await userModel.insetUser([uuidV1(), user.userName, user.passWord, getName, new Date().getTime()]).then((res) => {
        console.log('注册成功')
        ctx.body = {
          state: 1,
          msg: '注册成功',
          data: []
        }
      }).catch((err) => {
        ctx.body = {
          state: 0,
          msg: err,
          data: []
        }
      })
    }

  })

})

module.exports = router

登录


signIn.js

// signIn.js
let router = require('koa-router')();
let userModel = require('../mysql.js');

const createToken = require('../token/createToken.js');

router.post('/signIn',async (ctx, next) => {
  let user = {
    userName: ctx.request.body.userName,
    passWord: ctx.request.body.passWord
  }

  await userModel.findUser(user.userName).then((res) => {
    if (!res.length) {
      ctx.body = {
        state: 0,
        msg: '用户未注册!',
        data: []
      }
      console.log('用户未注册')
    } else {
      if (res[0].passWord === user.passWord) {
        let token = createToken(res[0]) // 创建token 存储用户id等重要信息

        ctx.body = {
          state: 1,
          msg: '用户登录成功!',
          data: [],
          token
        }
        console.log('密码校验正确, 允许登录')
      } else {
        ctx.body = {
          state: 0,
          msg: '用户名或者密码错误!',
          data: []
        }
        console.log('用户名或者密码错误')
      }
    }
  }).catch((err) => {
    ctx.body = {
      state: 0,
      msg: err,
      data: []
    }
  })

})

module.exports = router

生成Token, 解析Token

createToken.js , checkToken.js 原理

    // createToken.js
    const jwt = require('jsonwebtoken');
    
    // 创建token
    //登录时:核对用户名和密码成功后,应用将用户的id 作为JWT Payload的一个属性
    module.exports = function(user){
    
    // jwt.sign 参数详情
    //第一个是Payload,也就是用户信息(要注意payload不要传整个文档,Payload需要的是唯一且不变的数据,否则当Payload改变的时候需要重新下发token)。这里我们用文档的id,目的是唯一标识用户
    
    // 第二个参数是密钥,也就是你生成Signature时所用到的加密密钥。要注意这里必须和创建jwt的时候传入的secret一致,因为服务端需要用创建时的secret来解密。
    
    // 第三个参数则是设置一个token的过期时间,这里我们设置的是1天。
    
    
        const token = jwt.sign({
            userId: user.id,
            userName: user.userName,
            avator: user.avator
        }, 'kuaifengle', {    // "kuaifengle"  是校验码    解析时需要一致 才能取到 user 信息
            expiresIn: '24h' //过期时间设置为24h 格式有(s, m, h , day)。那么decode这个token的时候得到的过期时间为 : 创建token的时间 + 设置的值
        });
        return token;  返回token  前端存在浏览器cookie 中
    };
    //  checkToken.js
    const jwt = require('jsonwebtoken');
    
    // 接口访问必须要有Token (需要用户登录)
    module.exports = async ( ctx, next ) => {
        const authorization = ctx.get('Authorization'); // request 带过来的 token  存在浏览器的cookie中
        if (authorization == '') {
            ctx.body = {
                state: 0,
                msg: '用户未登录'
            }
            return false
        }
        const token = authorization;
        let tokenContent;
        try {
            // 根据 "kuaifengle" 钥解析 token 判断是否失效
            tokenContent = await jwt.verify(token, 'kuaifengle');     //如果token过期或验证失败,将抛出错误
            // 存入ctx 中 next() 可以获取到设置的 userInfo 数据
            ctx.userInfo = tokenContent
        } catch (err) {
            ctx.body = {
                state: 0,
                msg: '用户登录验证失效'
            }
        }
        await next();
    }

<br/>

其他的接口就不做解释了

项目打包后,放在 Koa2 / public / 下,就可以访问 localhost:3001 查看页面了

Github地址

都是基本的mysql语句操作,和业务逻辑, 具体看github源码

觉得对你有帮助的话,可以star一下 ^_^

查看原文

赞 4 收藏 3 评论 1

快疯了 发布了文章 · 2018-08-10

全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客

koa2+mysql+vue+vant 构建简单版移动端博客

具体内容展示

开始正文

github地址
<br/>

觉得对你有帮助的话,可以star一下^_^


必须安装:<br/>
mysql <br/>
node.js

vue-cli<br/>

目录结构


<br/><br/>

代码步骤

<br/>
app 目录下 打开 node 运行vue-cli vue init webpack 新建Vue项目<br/>
安装以下依赖模块:
<br/>

"axios": "^0.18.0",
"js-cookie": "^2.2.0",
"js-md5": "^0.7.3",
"nprogress": "^0.2.0",
"vant": "^1.1.15",
"vue": "^2.5.2",
"vue-router": "^3.0.1"


详细具体看github源码



koa2 目录下 打开 node 运行 npm init 编写信息<br/>
安装以下依赖模块: <br/>

"jsonwebtoken": "^8.3.0",  // 生成token
"koa-bodyparser": "^4.2.1", // 解析requeset body
"koa-cors": "^0.0.16", // koa跨域
"koa-router": "^7.4.0", // koa-router
"koa-static": "^5.0.0", // koa静态文件
"koa2": "^2.0.0-alpha.7", // koa2
"mysql": "^2.16.0", // mysql
"uuid": "^3.3.2" // 生成userId

<br/>

在 koa2/config.js 进行 mysql 链接配置

// config.js  数据库配置

    module.exports = {  // mysql 配置
      mysql: {
        host: 'localhost', // 地址
        user: 'root', // 用户账号
        password: '', // 密码
        database: 'test' // test库
      },
      port: 3001 // 监听端口
    }

编写 sql 配置

在 koa2/mysql.js 进行编写 sql 语句

// mysql.js   编写sql语句
    
    const mysql = require('mysql');
    const config = require('./config.js');
    
    var pool = mysql.createPool(config.mysql);
    
    const query = function (sql, val) {
      return new Promise((resolve, reject) => {
        pool.getConnection(function (err, connection) {
          if (err) {
            reject(err)
          } else {
            connection.query(sql, val, (err, res) => {
              if (err) {
                reject(err)
              } else {
                resolve(res)
              }
              connection.release();
            })
          }
        })
      })
    }

    const createTable = (sql) => {
      query(sql, [])
    }
    
    const usersTable = `CREATE TABLE IF NOT EXISTS users (
       id VARCHAR(36) NOT NULL,
       userName VARCHAR(16) NOT NULL,
       passWord VARCHAR(16) NOT NULL,
       avator VARCHAR(50) NOT NULL,
       createTime VARCHAR(50) NOT NULL,
       PRIMARY KEY (id) 
    )`;
    
    const postsTable = `CREATE TABLE IF NOT EXISTS posts (
       id INT NOT NULL AUTO_INCREMENT,
       userName VARCHAR(100) NOT NULL,
       userId VARCHAR(40) NOT NULL,
       avator VARCHAR(100) NOT NULL,
       title VARCHAR(100) NOT NULL,
       content TEXT(0) NOT NULL,
       hot VARCHAR(40) NOT NULL,
       comments VARCHAR(40) NOT NULL,
       createTime VARCHAR(100) NOT NULL,
       PRIMARY KEY (id) 
    )`;
    
    const commentTable = `CREATE TABLE IF NOT EXISTS comment (
       id INT NOT NULL AUTO_INCREMENT,
       userName VARCHAR(100) NOT NULL,
       content TEXT(0) NOT NULL,
       postId VARCHAR(40) NOT NULL,
       avator VARCHAR(100) NOT NULL,
       createTime VARCHAR(100) NOT NULL,
       PRIMARY KEY (id) 
    )`;
    
    
    // 建表
    createTable(usersTable) // 用户表
    createTable(postsTable) // 文章表
    createTable(commentTable) // 评论表
    
    const insetUser = (val) => { // 注册
      let _sql = `INSERT INTO users (id, userName, passWord, avator, createTime) VALUES (?,?,?,?,?)`
      return query(_sql, val)
    }
    
    const findUser = (val) => { // 查找所有User
      let _sql = `SELECT * FROM users WHERE userName = '${val}'`
      return query(_sql)
    }
    
    const createPosts = (val) => { // 新建posts
      let _sql = `INSERT INTO posts (userName, userId, avator, title, content, hot, comments, createTime) VALUES (?,?,?,?,?,?,?,?)`
      return query(_sql, val)
    }
    
    const updatePosts = (val) => { // 修改posts
      let _sql = `UPDATE posts SET title=?, content=? WHERE id=?`
      return query(_sql, val)
    }
    
    const updatePostsComment = (val) => { // 修改posts评论数量
      let _sql = `UPDATE posts SET comments=? WHERE id=?`
      return query(_sql, val)
    }
    
    const updatePostsHot = (val) => { // 修改posts查看人数
      let _sql = `UPDATE posts SET hot=? WHERE id=?`
      return query(_sql, val)
    }
    
    const postsList = (key, pg, size) => { // 查找所有posts
      let _sql = `SELECT * FROM posts ${ key ? "WHERE title LIKE '%"+key+"%' " : ' '}ORDER BY createTime DESC limit ${pg * size} , ${size}`
      return query(_sql)
    }
    
    const postDetail = (val) => { // 根据ID 查询 postsDetail
      let _sql = `SELECT * FROM posts WHERE id = '${val}'`
      return query(_sql)
    }
    
    const commentList = (val) => { // 获取留言列表
      let _sql = `SELECT * FROM comment WHERE postId = '${val}' ORDER BY createTime DESC`
      return query(_sql)
    }
    
    const createComment = (val) => { // 添加 留言
      let _sql = `INSERT INTO comment (userName, content, postId, avator, createTime) VALUES (?,?,?,?,?)`
      return query(_sql, val)
    }
    
    module.exports =  {
      insetUser,
      findUser,
      createPosts,
      postsList,
      updatePosts,
      updatePostsComment,
      updatePostsHot,
      postDetail,
      createComment,
      commentList
    }

编写 koa2 配置

在 koa2/app.js 进行编写 koa2 配置

// app.js

    const path = require('path')
    const Koa = require('koa2');
    const router = require('koa-router');
    var cors = require('koa-cors');
    const bodyParser = require('koa-bodyparser');
    const config = require('./config.js');
    const server = require('koa-static');
    const jwt = require('jsonwebtoken')
    
    require('./mysql.js');
    
    const app = new Koa();
    
    app.use(server(
      path.join(__dirname , './public')
    )) // 设置静态文件
    
    app.use(cors({
          origin: 'http://localhost:8080',  // 允许 loclhost:8080 访问
          exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
          maxAge: 5,
          credentials: true,
          allowMethods: ['GET', 'POST'],
          allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
      })
    ); // 设置跨域
    
    app.use(bodyParser({
      formLimit: '1mb'
    })) // ctx body 中间件
    
    app.use(require('./routers/signUp.js').routes()) // 注册
    app.use(require('./routers/signIn.js').routes()) // 登录
    
    app.use(require('./routers/createPosts.js').routes()) // 新建文章
    app.use(require('./routers/postsList.js').routes()) // 搜索文章
    app.use(require('./routers/postDetail.js').routes()) // 文章detail
    app.use(require('./routers/updatePosts.js').routes()) // 修改文章
    
    app.use(require('./routers/createComment.js').routes()) // 添加留言
    app.use(require('./routers/commentList.js').routes()) // 获取留言
    
    app.listen(config.port) // 监听端口
    
    console.log('listen in localhost:' + config.port)

分析登录注册

详细分析一下 登录 注册


登录 -> 有账号 -> 校验密码 -> 成功 -> 返回Token



登录 -> 没有账号 -> 注册 -> 判断是否有账号 -> 没有-> sql注册

///////////////////-> 注册 -> 有账号 -> 去登录

注册<br/>

signUp.js

// signUp.js

const router = require('koa-router')();
const uuidV1 = require('uuid/v1'); // 生成13位 userId
const userModel = require('../mysql.js');
const fs = require('fs'); // 文件操作

// 注册
router.post('/signUp', async (ctx, next) => {
// post请求 从body中获取注册参数
  let user = {
    userName: ctx.request.body.userName,
    passWord: ctx.request.body.passWord,
    repeatPass: ctx.request.body.repeatPass,
    avator: ctx.request.body.avator
  }

  await userModel.findUser(user.userName).then(async (res) => {
    if (res.length) { // length > 1 说明 表中有数据
      try {
        throw Error('用户已存在')
      } catch (err) {
        console.log(err)
      }
      ctx.body = {
        state: 0,
        msg: '用户已存在!',
        data: []
      }
    } else if (!user.userName || user.passWord !== user.repeatPass) {
      ctx.body = {
        state: 0,
        msg: '密码输入错误',
        data: []
      }
    } else {  // 否者没有注册
      //处理上传头像
      let base64Data = user.avator.replace(/^data:image\/\w+;base64,/, "");
      let dataBuffer = new Buffer(base64Data, 'base64');
      let getName = Number(Math.random().toString().substr(3)).toString(36) + Date.now()

      // 上传图片到 public/images 文件夹中
      await fs.writeFile('./public/images/' + getName + '.png', dataBuffer, err => {
          if (err) {
            console.log(err);
            return false
          }
          console.log('头像上传成功') 
      });  

      await userModel.insetUser([uuidV1(), user.userName, user.passWord, getName, new Date().getTime()]).then((res) => {
        console.log('注册成功')
        ctx.body = {
          state: 1,
          msg: '注册成功',
          data: []
        }
      }).catch((err) => {
        ctx.body = {
          state: 0,
          msg: err,
          data: []
        }
      })
    }

  })

})

module.exports = router

登录


signIn.js

// signIn.js
let router = require('koa-router')();
let userModel = require('../mysql.js');

const createToken = require('../token/createToken.js');

router.post('/signIn',async (ctx, next) => {
  let user = {
    userName: ctx.request.body.userName,
    passWord: ctx.request.body.passWord
  }

  await userModel.findUser(user.userName).then((res) => {
    if (!res.length) {
      ctx.body = {
        state: 0,
        msg: '用户未注册!',
        data: []
      }
      console.log('用户未注册')
    } else {
      if (res[0].passWord === user.passWord) {
        let token = createToken(res[0]) // 创建token 存储用户id等重要信息

        ctx.body = {
          state: 1,
          msg: '用户登录成功!',
          data: [],
          token
        }
        console.log('密码校验正确, 允许登录')
      } else {
        ctx.body = {
          state: 0,
          msg: '用户名或者密码错误!',
          data: []
        }
        console.log('用户名或者密码错误')
      }
    }
  }).catch((err) => {
    ctx.body = {
      state: 0,
      msg: err,
      data: []
    }
  })

})

module.exports = router

生成Token, 解析Token

createToken.js , checkToken.js 原理

    // createToken.js
    const jwt = require('jsonwebtoken');
    
    // 创建token
    //登录时:核对用户名和密码成功后,应用将用户的id 作为JWT Payload的一个属性
    module.exports = function(user){
    
    // jwt.sign 参数详情
    //第一个是Payload,也就是用户信息(要注意payload不要传整个文档,Payload需要的是唯一且不变的数据,否则当Payload改变的时候需要重新下发token)。这里我们用文档的id,目的是唯一标识用户
    
    // 第二个参数是密钥,也就是你生成Signature时所用到的加密密钥。要注意这里必须和创建jwt的时候传入的secret一致,因为服务端需要用创建时的secret来解密。
    
    // 第三个参数则是设置一个token的过期时间,这里我们设置的是1天。
    
    
        const token = jwt.sign({
            userId: user.id,
            userName: user.userName,
            avator: user.avator
        }, 'kuaifengle', {    // "kuaifengle"  是校验码    解析时需要一致 才能取到 user 信息
            expiresIn: '24h' //过期时间设置为24h 格式有(s, m, h , day)。那么decode这个token的时候得到的过期时间为 : 创建token的时间 + 设置的值
        });
        return token;  返回token  前端存在浏览器cookie 中
    };
    //  checkToken.js
    const jwt = require('jsonwebtoken');
    
    // 接口访问必须要有Token (需要用户登录)
    module.exports = async ( ctx, next ) => {
        const authorization = ctx.get('Authorization'); // request 带过来的 token  存在浏览器的cookie中
        if (authorization == '') {
            ctx.body = {
                state: 0,
                msg: '用户未登录'
            }
            return false
        }
        const token = authorization;
        let tokenContent;
        try {
            // 根据 "kuaifengle" 钥解析 token 判断是否失效
            tokenContent = await jwt.verify(token, 'kuaifengle');     //如果token过期或验证失败,将抛出错误
            // 存入ctx 中 next() 可以获取到设置的 userInfo 数据
            ctx.userInfo = tokenContent
        } catch (err) {
            ctx.body = {
                state: 0,
                msg: '用户登录验证失效'
            }
        }
        await next();
    }

<br/>

其他的接口就不做解释了

项目打包后,放在 Koa2 / public / 下,就可以访问 localhost:3001 查看页面了

Github地址

都是基本的mysql语句操作,和业务逻辑, 具体看github源码

觉得对你有帮助的话,可以star一下 ^_^

查看原文

赞 4 收藏 3 评论 1

快疯了 回答了问题 · 2018-05-28

解决VSCode更新后,vue语法高亮没了

你试试这样
第一步
clipboard.png

第二步
clipboard.png

第三步
clipboard.png

关注 6 回答 5

快疯了 回答了问题 · 2018-04-23

vue form表单上传图片 点击按钮上传

创建一个数组存放 form 表单的图片数据, 添加一个的图片就要在数组里 push 一个,并转换为 base64 在本地预览, 点击按钮时, 把数组循环添加到 formData 里面 上传给后台

关注 2 回答 1

快疯了 收藏了文章 · 2018-04-17

基于 Vue的图片裁剪插件

vue-crpopper

预览
项目地址

一些想法

网上看了看基于vue的图片裁剪的插件很少,刚刚好项目需要使用到图片裁剪,于是便有了这个插件的
诞生。

实现的原理

通过canvas生成新的图片, 可以上传到后台保存。

效果图

图片描述

安装 npm install vue-cropper

使用 import VueCropper from vue-cropper

名称功能默认值可选值
img裁剪图片的地址url 地址 || base64 || blob
outputSize裁剪生成图片的质量10.1 - 1
outputType裁剪生成图片的格式jpg (jpg 需要传入jpeg)jpeg || png || web

内置方法 通过this.$refs.cropper 调用

this.$refs.cropper.startCrop() 开始截图
this.$refs.cropper.stopCrop() 停止截图
this.$refs.cropper.clearCrop() 清除截图
this.$refs.cropper.getCropData() 获取截图信息
查看原文

快疯了 回答了问题 · 2018-04-12

解决关于vue中v-on和v-bind适用场景的疑问

你看没看见使用 v-onv-bind 的2个标签 一个是 <Tree></Tree> 一个是 <div></div> ,
<Tree> 是 iview 的内置组件所以你要遵循 iview 的 Api 去绑定事件, <div>是 html 标签,
你把2个都改成 <div></div>标签, 一个用 v-bind 一个用 v-on 你才能得到答案!

关注 6 回答 6

快疯了 回答了问题 · 2018-04-12

解决vue框架多人同时开发,各自写各自的页面,最后怎么整合在一起?

各自负责各自的页面, 配置好路由,最后上传svn,别人更新一下就可以运行你负责的页面了

关注 4 回答 2

快疯了 回答了问题 · 2018-04-11

关于css遮罩层可以滚动的问题

遮罩层弹出的时候, 给 body 设置 height: 浏览器可视区高度; 并设置 body: overflow:hidden; 溢出隐藏; 这样就不能滚动了, 遮罩层关闭时body之前设置的样式移除;

关注 4 回答 2

认证与成就

  • 获得 16 次点赞
  • 获得 6 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 5 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-05-26
个人主页被 432 人浏览