vue我的小项目总结

时间 2019-11-16

标签 vue 我的小项目总结繁體版

原文原文链接

简介

本身写了一个vue小项目总结总结(为了节省篇幅和你们阅读的时间直接进入正题认真脸！)html

项目详情能够查看的我Github仓库地址前端

项目预览地址vue

vue-lottie动画教程node

用户登陆账号密码都是11
后台管理登陆也是11
(其实还有别的账号密码,若是您有心情能够查看api本身用Postman注册,用户注册本身能够直接在页面上注册)

github描述文档写了使用了写技术栈和界面截图ios

功能总结

前端api调用

# api
import axios from 'axios'
import store from '@/store/store'

export default () => {
  return axios.create({
    baseURL: `http://123.207.60.132:8081/`,
    headers: {
      Authorization: `Bearer ${store.state.token}`
    }
  })
}

import Api from '@/services/Api'

export default {
  userLogin(credentials) {
    return Api().post('/userLogin', credentials)
  }
}

# music api

import axios from 'axios'
export default () => {
  return axios.create({
    baseURL: `http://123.207.60.132:3000/`
  })
}

import Api from '@/services/musicApi'

export default {
  getTopList() {
    return Api().get('/top/list?idx=3')
  }
}
复制代码

更多内容地址

前端vuex状态管理

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  strict: true,
  plugins: [createPersistedState()],
  state: {
    token: null,
    user: null,
    isUserLoggedIn: false
  },

  mutations: {
    setToken(state, token) {
      state.token = token
      state.isUserLoggedIn = !!(token)
    },
    setUser(state, user) {
      state.user = user
    }
  },

  actions: {
    setToken({ commit }, token) {
      commit('setToken', token)
    },
    setUser({ commit }, user) {
      commit('setUser', user)
    }
  }
})
复制代码

更多内容地址

前端界面

# 组件使用
<v-slider :sliderImg="sliderImg"></v-slider>

# 组件引入
 import VSlider from './Slider/Index'

export default {
    # 声明组件
    components: {
        VSlider
    },
    data() {
        return {
            sliderImg: [
                {
                src: 'item1'
                },
                {
                src: 'item2'
                },
                {
                src: 'item3'
                },
                {
                src: 'item4'
                }
            ]
        }
    }
}
复制代码

前端页面基本都是按照这样的方式写的更多内容地址

后台界面

后台界面除了按照前端页面写的之外还用了vue-element-admin后台界面的写法git
其中侧边栏是根据 router.js 配置的路由而且根据权限动态生成的，这样就省去了写一遍路由还要手动再写一次侧边栏这种麻烦事，但也遇到了一个问题，路由可能会有多层嵌套，不少人反馈本身的侧边栏会有三级，甚至还有五级的。因此重构了一下侧边栏，使用了递归组件，这样无论你多少级，都能愉快的显示了。文章地址复制的hhhhgithub
页面还用了icon文章地址web
主页显示用了v-charts图表组件这个基本的使用挺简单的看看文档就ok了不用另外写文章了vue-router
更多内容地址mongodb

前端router

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export const constantRouterMap = [
  { path: '*', redirect: '/404', hidden: true }
]

export default new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})
复制代码

更多内容地址

后端基本服务

const express = require('express')
const app = express()
const config = require('./config/config')

const fs = require('fs')
const path = require('path')
require('./router/index.js')(app)
app.use(express.static(path.resolve(__dirname, './dist')))

app.get('*', function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8')
    res.send(html)
})

app.listen(config.port, function () {
  console.log(`server run ${config.port} port`)
})
复制代码

后台主要使用nodejs express mongodb提供服务
功能用户登陆注册
功能管理员登陆注册
用户的密码加密
更多内容地址

后端model

const mongoose = require('mongoose')
const Schema = mongoose.Schema
const bcrypt =require('bcryptjs')  // 密码加密
let SALT_WORK_FACTOR = 10
const config = require('../config/config')
mongoose.connect(config.database)


var UserSchema = new Schema({
  userName: {
    type: String,
    unique: true,  // 不重复
    require: true  // 不为空
  }
})

// 在保存密码以前用bcrypt加密保证密码只有用户知道
UserSchema.pre('save', function (next){
  // 保存this指向
  let _this = this
  // 判断是否为最新
  if(!_this.isModified('password')){
      return next()
  }
  // 加密EMMM 产生一个salt
  bcrypt.genSalt(SALT_WORK_FACTOR, function (err, salt){
    if(err){
      return next(err)
    }

    // 结合salt 生成 hash
    bcrypt.hash(_this.password, salt, function (err, hash) {
      if(err){
        return next(err)
      }

      // 用hash覆盖明文密码
      _this.password = hash
      next()
    })
  })
})

// 经过bcrypt的compare方法，对再次传入的密码和数据库中保存的加密后的密码进行比较，若是匹配，则登陆成功 isMatch 为布尔值
// mongoose 模型扩展 在 methods 对象上扩展
UserSchema.methods.comparePassword = function (candidatePassword, cb) {
  bcrypt.compare(candidatePassword, this.password, function (err, isMatch) {
    if (err) {
      return cb(err);
    }

    cb(null, isMatch);
  });
};
module.exports = mongoose.model('User', UserSchema)
复制代码

使用mongoose Schema定义数据模型
经过bcrypt密码加密
扩展方法对密码加密
更多内容地址

后端controllers

const User = require('../model/User')
const AdminUser = require('../model/AdminUser')
const jwt = require('jsonwebtoken')
const config = require('../config/config')


// token
function jwtSignUser(user) {
  const ONE_WEEK = 60 * 60 * 24 * 7
  return jwt.sign(user, config.authentication.jwtSecret, {
    expiresIn: ONE_WEEK
  })
}

module.exports = {
  async userLogin(req, res) {
    try {
      await User.findOne({
        userName: req.body.userName
      }, function (err, user) {
        .........
      })
    }
  }
}
复制代码

登陆成功返回

success: true,
message: '登陆成功',
token: 'token值'
复制代码

登陆成功返回

success: false,
message: '登陆失败', (或其余信息详情看文件)
token: ''
复制代码

对用户的密码判断

user.comparePassword(req.body.pass, (err, isMatch) => {
     ...
 }
复制代码

更多内容地址

总结

经过上面的练习学习了更多新知识
更加理解先后端的交互
增强了技术掌握程度
还有不少不符合如今开发的规范
代码不够精简干练
基础知识掌握不牢固
设计审美水平须要提高
......

大概就是这么多吧, 项目还有不少部规范的地方之后会慢慢改正, 虽然是我的里练习的项目, 本身仍是话了不少时间和心血

最后最后最后说一个厚脸皮的话小哥哥小姐姐若是以为不错的话能够给小生点一个 Star 嘛谢谢哇QAQ~~

本身立刻就要实习了有大佬看上带走的吗！QAQ