博客项目（Go+Vue+Mysql）
- **介绍**
- **系统总体开发情况-功能模块**
- **各部分模块实现**
介绍
- 本系列(后期可能博主会统一为专栏)博文献给即将毕业的计算机专业同学们,因为博主自身本科和硕士也是科班出生,所以也比较了解计算机专业的毕业设计流程以及模式，在编写的过程中可以说几乎是参照毕业设计目录样式来进行的.
- 博主分享的基本都是自己接触过的项目Demo，整理了一下自己做过的项目，将可以作为毕业设计的项目分享给大家。（
注：项目基本都是博主自己用过的，所以不存在远古代码无法使用）
系列的文章后端都是采用Java或者Go语言，前端主要是采用的原生Js和Vue框架搭建的。数据都是采用Mysql。还有较少的微信小程序开发。开发工具这些可以自己选择，我分享一下自己的Go语言开发我用的Vscode，前端用的HBuilder X,测试接口Postman，Java开发用的IDEA。数据库查看用的navicat，上传服务器Xshell 7和Xftp 7。
系统总体开发情况-功能模块
各部分模块实现
今天主要是将后端实现登录效果和改一些前端的代码
前端：
在这里插入图片描述
因为原始代码是将侧边栏写在了App.vue里面，所以我改了一下增加了Sidebar.vue将侧边栏新建了一个文件保存。然后在App.vue里面引用。
在这里插入图片描述
(这也是我的项目哈，俺叫王先生以前的名字)
package model
import (
"github.com/dgrijalva/jwt-go"
)
//User表
type User struct {
Id int `json:"id"`
Username string `json:"username"`
Password string `json:"password"`
}
// UserLogin 用户登录
func UserLogin(username string) (User,error){
mod := User{}
err :=Db.Get(&mod, "select * from userlogin where username=? limit 1", username)
return mod,err
}
//UserClaims token 携带的数据
type UserClaims struct {
Id int `json:"id"`
Username string `json:"username"`
Password string `json:"password"`
jwt.StandardClaims
}
package route
import (
// "fmt"
"github.com/zxysilent/utils"
"github.com/dgrijalva/jwt-go"
"blog_go/model"
"github.com/labstack/echo"
)
// ServerHeader middleware adds a `Server` header to the response.
func ServerHeader(next echo.HandlerFunc) echo.HandlerFunc {
return func(ctx echo.Context) error {
ctx.Response().Header().Set(echo.HeaderServer, "Echo/3.0")
// fmt.Println(ctx.Response().Header())
tokenString := ctx.FormValue("token")
claims := model.UserClaims{}
token, err := jwt.ParseWithClaims(tokenString, &claims, func(token *jwt.Token) (interface{}, error) {
return []byte("123"), nil
})
if err==nil && token.Valid {
return next(ctx)
} else {
return ctx.JSON(utils.ErrToken("验证失败"))
}
}
}
package route
import (
"github.com/labstack/echo/middleware"
"blog_go/control"
"github.com/labstack/echo"
)
func Run(){
blog := echo.New()
blog.Use(middleware.CORS())
blog.Use(middleware.Logger())
blog.Use(middleware.Recover())
//用户登录
blog.POST("/admin/login", control.UserLogin)
adm:=blog.Group("/admin",ServerHeader)
blog.GET("/", control.Index)
blog.Logger.Fatal(blog.Start(":1323"))
// blog.Start(":1323")
}
package control
import (
// "fmt"
"time"
"github.com/zxysilent/utils"
"blog_go/model"
"github.com/dgrijalva/jwt-go"
"github.com/labstack/echo"
)
type login struct {
Username string `json:"username"`
Password string `json:"password"`
}
func UserLogin(ctx echo.Context) error {
ipt := login{}
err:=ctx.Bind(&ipt)
if err!=nil{
return ctx.JSON(utils.ErrIpt("输入有误", err.Error()))
}
mod, err :=model.UserLogin(ipt.Username)
if err!=nil {
return ctx.JSON(utils.ErrIpt("用户名错误", err.Error()))
}
if mod.Password !=ipt.Password{
return ctx.JSON(utils.ErrIpt("密码错误"))
}
// Create the UserClaims 生成
claims := model.UserClaims{
Id:mod.Id,
Username:mod.Username,
Password:mod.Password,
StandardClaims: jwt.StandardClaims{
ExpiresAt: time.Now().Add(2*time.Hour).Unix(),
},
}
token := jwt.NewWithClaims(jwt.SigningMethodHS256, claims)
//自己的密钥
ss, err := token.SignedString([]byte("123"))
// fmt.Printf("%v %v", ss, err)
return ctx.JSON(utils.Succ("登录成功", ss))
}
前端写的路由守卫：
```javascript
import Vue from 'vue'
import Router from 'vue-router'
// import Login from '@/view/Login'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: resolve => require(['@/view/login'], resolve),
meta: {
title: '后台登陆'
},
},
{
path: '/organizationManage',
component: resolve => require(['@/view/index/index'], resolve),
meta: {
title: '首页'
},
redirect: to => {
return '/organizationManage'
},
children:[
{
path: '/organizationManage',
component: resolve => require(['@/view/organization_manage/index'], resolve),
meta: {
title: '组织管理'
},
},
{
path: '/staffManage',
component: resolve => require(['@/view/staff_manage/index'], resolve),
meta: {
title: '员工管理'
},
},
],
},
{
path: '/personManage',
component: resolve => require(['@/view/index/index'], resolve),
meta: {
title: '个人管理'
},
redirect: to => {
return '/personManage'
},
children:[
{
path: '/personManage',
component: resolve => require(['@/view/personal/personinformation'], resolve),
meta: {
title: '个人管理1'
},
},
// {
// path: '/staffManage',
// component: resolve => require(['@/view/staff_manage/index'], resolve),
// meta: {
// title: '员工管理'
// },
// },
],
},
]
});
//导航守卫限制页面
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
if (to.path === '/login') {
next();
} else {
let token = localStorage.getItem('token');
if (token === null || token === '') {
next('/');
} else {
next();
}
}
});
export default router;
async submitForm(formName) {
this.$refs[formName].validate(async (valid) => {
if (valid) {
const res = await useredit({
token: getStore('token'),
nickname:this.formLabelAlign.nickname,
email:this.formLabelAlign.email,
signature:this.formLabelAlign.signature
})
console.log(res)
if(res.code==200){
console.log('submit!');
}else{
console.log("修改失败");
}
} else {
console.log('error submit!!');
return false;
}
});
},
// UserEdit 个人信息修改
func UserEdit(nickname,email,signature,token string) error {
tx,_ :=Db.Begin()//事务
result, err :=tx.Exec("update userinformation set `nickname`=?,email=?,signature=? where token=?", nickname,email,signature,token)
if err!=nil{
tx.Rollback()
return err
}
rows,_ :=result.RowsAffected()
if rows<1 {
tx.Rollback()
return errors.New("row affecter<1")
}
tx.Commit()
return nil
}
文章管理
后台管理页面：
在这里插入图片描述
编辑删除功能都做啦。当然也少不了新增。
在这里插入图片描述
最后想说的
对项目有任何疑问，或者说想学习项目开发的都可以来问博主哦~。也可以选题，开题指导，论文整体框架或者项目整体开发指导。
计算机专业毕业设计项目(附带有配套源码以及相关论文，有需要的同学可以联系博主，但是不免费哦)。
联系方式
微信号：wxid_rrun0cqao5ny22
![由[哈希/散列]模拟实现[unordered_map/unordered_set] (手撕迭代器)](https://img-blog.csdnimg.cn/63fa426c43b24ea49a4966046d7fc091.png)
![[黑马程序员TypeScript笔记]------一篇就够了](https://img-blog.csdnimg.cn/0f044f450122461cb43c393334a4ce0e.png)
