简介
自己写了一个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) {
.........
})
}
}
}
- 登录成功返回
success: true,
message: '登录成功',
token: 'token值'
- 登录成功返回
success: false,
message: '登录失败', (或其他信息详情看文件)
token: ''
- 对用户的密码判断
user.comparePassword(req.body.pass, (err, isMatch) => {
...
}
- 更多内容地址
总结
-
通过上面的练习学习了更多新知识
-
更加理解前后端的交互
-
加强了技术掌握程度
-
还有很多不符合现在开发的规范
-
代码不够精简干练
-
基础知识掌握不牢固
-
设计审美水平需要提升
-
......
大概就是这么多吧, 项目还有很多部规范的地方以后会慢慢改正, 虽然是个人里练习的项目, 自己还是话了很多时间和心血
最后 最后 最后 说一个厚脸皮的话 小哥哥小姐姐如果觉得不错的话可以给小生点一个 Star 嘛 谢谢哇QAQ~~
自己马上就要实习了 有大佬看上带走的吗！QAQ
网友评论