vue个人小项目总结

Posted on 2018-06-22 Edited on 2019-07-16 In Vue

简介

自己写了一个vue小项目总结总结(为了节省篇幅和大家阅读的时间直接进入正题认真脸！)

项目详情可以查看的我Github仓库地址

项目预览地址

用户登录帐号密码都是11
后台管理登录也是11
(其实还有别的帐号密码,如果您有心情可以查看api自己用Postman注册,用户注册自己可以直接在页面上注册)

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

功能总结

前端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后台界面的写法
其中侧边栏是根据 router.js 配置的路由并且根据权限动态生成的，这样就省去了写一遍路由还要手动再写一次侧边栏这种麻烦事，但也遇到了一个问题，路由可能会有多层嵌套，很多人反馈自己的侧边栏会有三级，甚至还有五级的。所以重构了一下侧边栏，使用了递归组件，这样不管你多少级，都能愉快的显示了。文章地址复制的hhhh
页面还用了icon文章地址
主页显示用了v-charts图表组件这个基本的使用挺简单的看看文档就ok了不用另外写文章了
更多内容地址

前端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) {
        .........
      })
    }
  }
}

登录成功返回

1
2
3

success: true,
message: '登录成功',
token: 'token值'

登录成功返回

1
2
3

success: false,
message: '登录失败', (或其他信息详情看文件)
token: ''

对用户的密码判断

1
2
3

user.comparePassword(req.body.pass, (err, isMatch) => {
    ...
}

更多内容地址

总结

通过上面的练习学习了更多新知识
更加理解前后端的交互
加强了技术掌握程度
还有很多不符合现在开发的规范
代码不够精简干练
基础知识掌握不牢固
设计审美水平需要提升
……

大概就是这么多吧, 项目还有很多部规范的地方以后会慢慢改正, 虽然是个人里练习的项目, 自己还是话了很多时间和心血

最后最后最后说一个厚脸皮的话小哥哥小姐姐如果觉得不错的话可以给小生点一个 Star 嘛谢谢哇QAQ~~

自己马上就要实习了有大佬看上带走的吗！QAQ