响应式网站建设软文一个自己的网站

介绍

• 本系列(后期可能博主会统一为专栏)博文献给即将毕业的计算机专业同学们,因为博主自身本科和硕士也是科班出生,所以也比较了解计算机专业的毕业设计流程以及模式，在编写的过程中可以说几乎是参照毕业设计目录样式来进行的.
• 博主分享的基本都是自己接触过的项目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 modelimport ("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 routeimport (// "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 routeimport ("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 controlimport (// "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