怀化网站建设有哪些手机英文网站大全

当前位置： 首页 > news >正文

怀化网站建设有哪些,手机英文网站大全,网站开发实用案例教程,常熟制作网站的地方目录 一.所用技术栈#xff1a; 二.后端开发#xff1a; 1.文章分类列表渲染#xff1a; 2.新增文章分类#xff1a; 3.编辑文章分类#xff1a; 4.删除文章分类 #xff1a; 5.完整三层架构后端代码#xff1a; #xff08;1#xff09;Controller层#xff1a…目录 一.所用技术栈 二.后端开发 1.文章分类列表渲染 2.新增文章分类 3.编辑文章分类 4.删除文章分类
5.完整三层架构后端代码 1Controller层 2Service层 3Mapper层 三.前端开发 1.路由的使用 1Vue Router的使用 2使用vue-router来实现登录页面与主页面展示效果 ①创建 index.js
②在 main.js 导入创建的路由器 3子路由的使用 ①添加五个组件 ②配置子路由 ③在主页面的展示区声明router-view标签 ④给菜单项设置index属性设置点击后的路由地址 2.对于文章分类的前端开发 1导入ArticleCategory.vue文件 2文章分类的前端相关请求开发 ①Pinia状态管理库 1.在main.js文件导入pinia 2.定义store状态 ②文章分类列表渲染 ③添加请求拦截器 ④使用拦截器来对未登录统一处理 3新增文章分类 4编辑文章分类与删除 引言上篇文章实现了用户的注册以及登录的接口及页面的开发我们本篇博客讲述设计文章分类的相关接口及页面 一.所用技术栈 Vue3piniaaxioselement-plusrouter路由SpringBootJWT 二.后端开发 我们整个布局是下面的样子 需要我们开发四个接口 文章分类列表渲染新增文章分类编辑文章分类删除文章分类  因为这四个接口是基本的增删改查操作所以这里不过多强调代码如何写这里介绍一下参数校验的注解 ①在pojo类内属性上加的注解  NotNull值不能为空NotEmpty值不能为空并且不能为空串Email格式是email邮箱格式Patten(regexp正则表达式)判断格式 上面这四个需要在Controller层内参数前加上Validated注解才能使用。 JsonIgnore返回响应数据会忽略该属性eg可以在密码上加来加密JsonFormat(pattenyyyy-MM-dd HH:mm:ss)时间格式 上面这两个注解使用时可不用加Validated注解 。 ②在Controller层内参数前加的注解 URL参数需要是地址格式 而基于上面还是有些不够便捷我们提出了分组校验的概念在NotNullNotEmpty这两个注解前可加上(groups接口的字节码)来限定哪些方法会使用随后我们就再Controller层的参数前注解Validated(接口的字节码)这样就可以实现分组校验。 如果我们同一个校验项属于多个分组这样会很麻烦这个时候我们就可以借助默认分组来处理    若某个校验项没有指定分组默认属于Default分组分组之间可以继承A extends B那么A中可以拥有B中所有的校验项所以在Validated()括号内写继承Default的接口字节码就可以使用默认的校验项。 Data public class Category { // NotEmpty(groups {Add.class,Update.class})NotEmptyprivate String categoryName;//分类名称 // NotEmpty(groups {Add.class,Update.class})NotEmptyprivate String categoryAlias;//分类别名//若某个校验项没有指定分组默认属于Default分组//分组之间可以继承A extends B那么A中可以拥有B中所有的校验项public interface Add extends Default {}public interface Update extends Default {} } 基于上面的注解功能我们在pojo包下的Category类属性前加上完整注解代码 Data public class Category {NotNull(groups Update.class)private Integer id;//主键ID// NotEmpty(groups {Add.class,Update.class})NotEmptyprivate String categoryName;//分类名称 // NotEmpty(groups {Add.class,Update.class})NotEmptyprivate String categoryAlias;//分类别名private Integer createUser;//创建人IDJsonFormat(pattern yyyy-MM-dd HH:mm:ss)private LocalDateTime createTime;//创建时间JsonFormat(pattern yyyy-MM-dd HH:mm:ss)private LocalDateTime updateTime;//更新时间//若某个校验项没有指定分组默认属于Default分组//分组之间可以继承A extends B那么A中可以拥有B中所有的校验项public interface Add extends Default {}public interface Update extends Default {} } 介绍完这个注解开发我们就可以开发后端接口。  1.文章分类列表渲染 根据文档要求我们需要返回一个列表每个元素是一个Category类封装的数据。  2.新增文章分类 这里新增数据就可以使用Validated注解来判断数据 根据文档要求我们只需根据用户 id 保存两个数据值为了在我们JWT令牌中拿到用户id我们就会使用ThreadLocal来开辟线程空间存储JWT令牌如果想使用就可以在线程空间获取JWT令牌中的用户id。 如果不了解ThreadLocal请查看下面博客使用ThreadLocal来存取单线程内的数据-CSDN博客 MapString,Object map ThreadLocalUtil.get(); Integer userId (Integer) map.get(id); category.setCreateUser(userId); 3.编辑文章分类 这里更新数据就可以使用Validated注解来判断数据。 4.删除文章分类 删除就没什么好说的了这里就不过多强调。 5.完整三层架构后端代码 1Controller层 RestController RequestMapping(/category) public class CateController {Autowiredprivate CategoryService categoryService;PostMappingpublic Result add(RequestBody Validated(Category.Add.class) Category category){categoryService.add(category);return Result.success();}GetMappingpublic ResultListCategory list(){ListCategory list categoryService.list();return Result.success(list);}PutMappingpublic Result update(RequestBody Validated(Category.Update.class) Category category){categoryService.update(category);return Result.success();}DeleteMappingpublic Result delete(Integer id){categoryService.deleteById(id);return Result.success();} }2Service层 Service public class CategoryServiceImpl implements CategoryService {Autowiredprivate CategoryMapper categoryMapper;Overridepublic void add(Category category) {category.setCreateTime(LocalDateTime.now());category.setUpdateTime(LocalDateTime.now());MapString,Object map ThreadLocalUtil.get();Integer userId (Integer) map.get(id);category.setCreateUser(userId);categoryMapper.add(category);}Overridepublic ListCategory list() {MapString,Object map ThreadLocalUtil.get();Integer userId (Integer) map.get(id);return categoryMapper.list(userId);}Overridepublic Category findById(Integer id) {return categoryMapper.findById(id);}Overridepublic void update(Category category) {category.setUpdateTime(LocalDateTime.now());categoryMapper.update(category);}Overridepublic void deleteById(Integer id) {categoryMapper.deleteById(id);} }3Mapper层 Mapper public interface CategoryMapper {Insert(insert into category(category_name,category_alias,create_user,create_time,update_time) values (#{categoryName},#{categoryAlias},#{createUser},#{createTime},#{updateTime}))void add(Category category);Select(select * from category where create_user #{userId})ListCategory list(Integer userId);Select(select * from category where id #{id})Category findById(Integer id);Update(update category set category_name #{categoryName} , category_alias #{categoryAlias} , update_time #{updateTime} where id #{id})void update(Category category);Delete(delete from category where id #{id})void deleteById(Integer id); }三.前端开发 1.路由的使用 路由指的是根据不同的访问路径展示不同组件的内容。 Vue Router 是 Vue.js 的官方路由。 1Vue Router的使用 安装vue-router cnpm install vue-router4在src/router/index.js中创建路由器并导出在vue应用实例中使用vue-router声明router-view标签展示组件内容 2使用vue-router来实现登录页面与主页面展示效果 ①创建 index.js
//导入vue-router import { createRouter , createWebHistory } from vue-router;//导入vue组件 import LoginVue from /views/Login.vue; import LayoutVue from /views/Layout.vue;//定义路由关系 const routes [{path:/login,component: LoginVue},{path:/, //设置访问路径component: LayoutVue, //设置访问路径对应的访问组件} ]//创建路由器 const router createRouter({history: createWebHistory(), //路由模式routes: routes //路由关系 })//导出路由器 export default router; ②在 main.js 导入创建的路由器 import ./assets/main.scssimport { createApp } from vue import ElementPlus from element-plus import element-plus/dist/index.css import App from ./App.vue //导入创建的路由器 //index.js可以省略不写会默认导入该文件 import router from /routerconst app createApp(App); //将router传递至App.vue app.use(router) app.use(ElementPlus); app.mount(#app) ③在App.vue声明标签 script setup/scripttemplaterouter-view/router-view /templatestyle/style 这样就可以实现在同一页面显示不同组件。但是这样如果我们登录成功后不会直接跳转主页面那么这个时候我们需要通过路由来完成跳转主页面。 //导入路由器 import { useRouter } from vue-router; const router useRouter(); //通过路由跳转首页 router.push(跳转路径); 所以在login.vue文件内进行操作 //导入路由器 import { useRouter } from vue-router; const router useRouter(); //表单数据校验 const login async(){let result await userLoginService(registerData.value);ElMessage.success(result.msg ? result.msg : 登录成功);//通过路由跳转首页router.push(/); } 3子路由的使用 为了在我们主页面下展示区点击按钮展示不同的子组件我们就引入了子路由的知识 上图是我们的每一级路由关系我们想将五个vue文件在主页面Layout.vue中的展示区展示就需要配置子路由
①添加五个组件 ②配置子路由 在内部先定义路由关系然后创建路由器最后导出(暴露)路由器。 在路由关系内主页面内部设置 children 属性来声明五个子路由并且为了不让主页面/为空我们使用 redirect 来将 / 地址重定向为 /article/manage  //导入vue-router import { createRouter , createWebHistory } from vue-router;//导入vue组件 import LoginVue from /views/Login.vue; import LayoutVue from /views/Layout.vue; import ArticleCategoryVue from /views/article/ArticleCategory.vue import ArticleManageVue from /views/article/ArticleManage.vue import UserAvatarVue from /views/user/UserAvatar.vue import UserInfoVue from /views/user/UserInfo.vue import UserResetPasswordVue from /views/user/UserResetPassword.vue//定义路由关系 const routes [{path:/login,component: LoginVue},{path:/,component: LayoutVue,redirect: /article/manage, //重定向//子路由children:[{path:/article/category,component: ArticleCategoryVue},{path:/article/manage,component: ArticleManageVue},{path:/user/avatar,component: UserAvatarVue},{path:/user/info,component: UserInfoVue},{path:/user/resetPassword,component: UserResetPasswordVue},]} ]//创建路由器 const router createRouter({history: createWebHistory(), //路由模式routes: routes //路由关系 })//导出路由器 export default router; ③在主页面的展示区声明router-view标签 !– 中间区域 –el-main!– div stylewidth: 1290px; height: 570px;border: 1px solid red;内容展示区/div –!– 路由 –router-view/router-view/el-main ④给菜单项设置index属性设置点击后的路由地址 这样设置后当我们点击文字时候就可以自动在我们设置的标签router-view展示区来展示index地址中的地址。 !– 左侧菜单 – el-aside width200pxdiv classel-aside__logo/divel-menu active-text-color#ffd04b background-color#232323 text-color#fffrouterel-menu-item index/article/categoryel-iconManagement //el-iconspan文章分类/span/el-menu-itemel-menu-item index/article/manageel-iconPromotion //el-iconspan文章管理/span/el-menu-itemel-sub-menu template #titleel-iconUserFilled //el-iconspan个人中心/span/templateel-menu-item index/user/infoel-iconUser //el-iconspan基本资料/span/el-menu-itemel-menu-item index/user/avatarel-iconCrop //el-iconspan更换头像/span/el-menu-itemel-menu-item index/user/resetPasswordel-iconEditPen //el-iconspan重置密码/span/el-menu-item/el-sub-menu/el-menu /el-aside 所以这样我们就分别对五个vue组件开发就可以了。 2.对于文章分类的前端开发 1导入ArticleCategory.vue文件 script setup import {Edit,Delete } from element-plus/icons-vue import { ref } from vue const categorys ref([{id: 3,categoryName: 美食,categoryAlias: my,createTime: 2023-09-02 12:06:59,updateTime: 2023-09-02 12:06:59},{id: 4,categoryName: 娱乐,categoryAlias: yl,createTime: 2023-09-02 12:08:16,updateTime: 2023-09-02 12:08:16},{id: 5,categoryName: 军事,categoryAlias: js,createTime: 2023-09-02 12:08:33,updateTime: 2023-09-02 12:08:33} ]) /script templateel-card classpage-containertemplate #headerdiv classheaderspan文章分类/spandiv classextrael-button typeprimary添加分类/el-button/div/div/templateel-table :datacategorys stylewidth: 100%el-table-column label序号 width100 typeindex /el-table-columnel-table-column label分类名称 propcategoryName/el-table-columnel-table-column label分类别名 propcategoryAlias/el-table-columnel-table-column label操作 width100template #default{ row }el-button :iconEdit circle plain typeprimary /el-buttonel-button :iconDelete circle plain typedanger/el-button/template/el-table-columntemplate #emptyel-empty description没有数据 //template/el-table/el-card /templatestyle langscss scoped .page-container {min-height: 100%;box-sizing: border-box;.header {display: flex;align-items: center;justify-content: space-between;} } /style 我们通过定义响应式数据categorys来动态响应文章分类数据。 设置 :datacategorys 将categorys数据绑定 table 表格并 prop 属性来分别把属性绑定到  column 上。 2文章分类的前端相关请求开发 文章分类列表渲染新增文章分类编辑文章分类删除文章分类  我们根据上面的四个内容开发
一般我们都会再 js 文件内定义函数然后再vue组件进行使用请求函数。  ①Pinia状态管理库 在article.js文件定义请求函数 为了传递JWT令牌我们就会利用Pinia状态管理库它允许跨组件或页面共享状态。 使用Pinia步骤 安装piniacnpm install pinia在vue应用实例中使用pinia在src/stores/token.js中定义store在组件中使用store  1.在main.js文件导入pinia 这里因为Pinia是默认内存存储刷新浏览器会丢失数据我们使用pinia内的Persist插件就可以将Pinia中的数据持久化存储。 为了使用persist我们需要安装persistcnpm install pinia-persistedstate-plugin然后再pinia中使用persist并且需要再main.js导入一下。 import ./assets/main.scssimport { createApp } from vue import ElementPlus from element-plus import element-plus/dist/index.css import App from ./App.vue import router from /router import { createPinia } from pinia import { createPersistedState } from pinia-persistedstate-pluginconst app createApp(App); //创建createPinia()函数实例 const pinia createPinia(); const persist createPersistedState(); pinia.use(persist) app.use(pinia) app.use(router) app.use(ElementPlus); app.mount(#app) 2.定义store状态 其实无外乎就是使用defineStore()方法在方法内部分为两个参数来写  第一个参数名字确保唯一性。 第二个参数函数其内部可以定义状态的所有内容其内部先创建一个响应式数据然后设置获取数据以及删除数据的方法最后返回数据以及方法。 加上Persist插件就可以将Pinia中的数据持久化存储。 //定义store import { defineStore } from pinia; import {ref} from vue /*第一个参数名字确保唯一性第二个参数函数其内部可以定义状态的所有内容返回值函数 */ export const useTokenStore defineStore(token,(){//定义状态内容//1.定义响应式变量const token ref();//2.定义函数来修改token值const setToken (newToken){token.value newToken;}//3.定义函数来移除token值const removeToken (){token.value ;}return {token,setToken,removeToken} },{persist: true //因为Pinia是默认内存存储刷新浏览器会丢失数据使用Persist插件就可以将Pinia中的数据持久化存储 } ); 这样我们就可以调用定义的useTokenStore来使用pinia了。 ②文章分类列表渲染 我们首先再Login.vue文件中把得到的token存储到pinia中 //导入store状态 import { useTokenStore } from /stores/token.js; //导入路由器 import { useRouter } from vue-router; const tokenstore useTokenStore(); const router useRouter(); //表单数据校验 const login async(){let result await userLoginService(registerData.value);// alert(result.msg ? result.msg : 登录成功); ElMessage.success(result.msg ? result.msg : 登录成功);//将得到的token存储到pinia中tokenstore.setToken(result.data);//通过路由跳转首页router.push(/); } 然后再article.js中定义请求函数 import request from /utils/request.js import { useTokenStore } from /stores/token.js;export const ArticleCategoryListService (){const tokenStore useTokenStore();//在pinia中定义的响应式数据不需要加.value才能使用数据return request.get(/category,{headers:{Authorization:tokenStore.token}}); }
但是这样我们需要将剩下的请求函数都要传递JWT令牌代码会很繁琐这个时候我们就可以添加请求拦截器来使用回调函数来发送。 ③添加请求拦截器 在request.js文件中添加请求拦截器 import { useTokenStore } from /stores/token.js; //添加请求拦截器 instance.interceptors.request.use((config){//请求前的回调const tokenStore useTokenStore();if(tokenStore.token){//通过config调用headers获取请求头在调用Authorization将JWT令牌存放到内部以此来添加统一的请求头config.headers.Authorization tokenStore.token;}return config;},(err){//请求错误的回调Promise.reject(err);//异步的状态转化成失败的状态} ) export default instance; 修改article.js文件的请求函数 import request from /utils/request.jsexport const ArticleCategoryListService (){return request.get(/category); }
④使用拦截器来对未登录统一处理 为了将没有登录的用户直接打开主界面随后浏览器直接能跳转到登录页面我们就可以添加响应拦截器来对未登录统一处理 在request.js文件中必须通过下面的方式才能导入router进行使用 import router from /router; // import { useRouter } from vue-router; // const router useRouter(); //在request.js文件中必须通过下面的方式才能导入router进行使用 import router from /router //添加响应拦截器 instance.interceptors.response.use(result{//判断业务状态码if(result.data.code 0){return result.data;}//操作失败// alert(result.data.message ? result.data.message : 服务异常)ElMessage.error(result.data.message ? result.data.message : 服务异常)//异步操作的状态转换为失败return Promise.reject(result.data);},err{//判断响应状态码401if(err.response.status 401){ElMessage.error(请先登录);//使用路由跳转登录页面router.push(/login);}else{ElMessage.error(服务异常);}return Promise.reject(err);//异步的状态转化成失败的状态} ) export default instance; 3新增文章分类 我们为了实现上面操作在Article.vue添加组件 !– 添加分类弹窗 – el-dialog v-modeldialogVisible title添加弹层 width30%el-form :modelcategoryModel :rulesrules label-width100px stylepadding-right: 30pxel-form-item label分类名称 propcategoryNameel-input v-modelcategoryModel.categoryName minlength1 maxlength10/el-input/el-form-itemel-form-item label分类别名 propcategoryAliasel-input v-modelcategoryModel.categoryAlias minlength1 maxlength15/el-input/el-form-item/el-formtemplate #footerspan classdialog-footerel-button clickdialogVisible false取消/el-buttonel-button typeprimary 确认 /el-button/span/template /el-dialog 随后我们通过设置响应式数据来控制添加分类弹窗
//控制添加分类弹窗 const dialogVisible ref(false) 随后调用点击方法 //添加分类数据模型 const categoryModel ref({categoryName: ,categoryAlias: }) //添加分类表单校验 const rules {categoryName: [{ required: true, message: 请输入分类名称, trigger: blur },],categoryAlias: [{ required: true, message: 请输入分类别名, trigger: blur },] } //添加表单 import { ElMessage } from element-plus; const addCategory async (){//调用接口let result await ArticleCategoryAddService(categoryModel.value);ElMessage.success(result.message ? result.message : 添加成功);//获取文章分类的函数articleCategoryList();//让添加分类弹窗消失dialogVisible false;//添加后值消失categoryModel ref({categoryName: ,categoryAlias: }) } 在article.js中 import request from /utils/request.jsexport const ArticleCategoryAddService (categoryData){return request.post(/category,categoryData); } 4编辑文章分类与删除 在组件内 我们复用添加的弹框给编辑弹框在下面点击事件使用三目运算符进行处理。  script setup import {Edit,Delete } from element-plus/icons-vue import { ref } from vue const categorys ref([]); //声明异步函数 import { ArticleCategoryListService,ArticleCategoryAddService,ArticleCategoryUpdateService,ArticleCategoryDeleteService } from /api/article.js; const articleCategoryList async (){let result await ArticleCategoryListService();categorys.value result.data; } articleCategoryList(); //控制添加分类弹窗 const dialogVisible ref(false)//添加分类数据模型 const categoryModel ref({categoryName: ,categoryAlias: }) //添加分类表单校验 const rules {categoryName: [{ required: true, message: 请输入分类名称, trigger: blur },],categoryAlias: [{ required: true, message: 请输入分类别名, trigger: blur },] } //添加表单 import { ElMessage } from element-plus; const addCategory async (){//调用接口let result await ArticleCategoryAddService(categoryModel.value);ElMessage.success(result.message ? result.message : 添加成功);//获取文章分类的函数articleCategoryList();//让添加分类弹窗消失dialogVisible false;//添加后值消失categoryModel ref({categoryName: ,categoryAlias: }) } //定义变量来控制标题 const title ref(); //展示编辑弹窗 const showDialog (row){dialogVisible.value true;title.value 编辑分类;//数据拷贝categoryModel.value.categoryName row.categoryName;categoryModel.value.categoryAlias row.categoryAlias;//扩展id属性将来需要传递给后台完成分类的修改categoryModel.value.id row.id; } //编辑分类 const updateCategory (){let result ArticleCategoryUpdateService(categoryModel.value);ElMessage.success(result.message ? result.message : 修改成功);articleCategoryList();dialogVisible.value false; } //清空 const clearData (){categoryModel.value.categoryName ;categoryModel.value.categoryAlias ; } //删除分类 import { ElMessageBox } from element-plus const deleteCategory (row){//提示用户ElMessageBox.confirm(确认要删除该分类信息吗,温馨提示,{confirmButtonText: 确认,cancelButtonText: 取消,type: warning,center: true,}).then(async () {let result await ArticleCategoryDeleteService(row.id); ElMessage({type: success,message: 删除成功,})articleCategoryList();}).catch(() {ElMessage({type: info,message: 取消删除,})}) } /script templateel-card classpage-containertemplate #headerdiv classheaderspan文章分类/spandiv classextrael-button typeprimary clickdialogVisible true;title 添加分类;clearData()添加分类/el-button/div/div/templateel-table :datacategorys stylewidth: 100%el-table-column label序号 width100 typeindex /el-table-columnel-table-column label分类名称 propcategoryName/el-table-columnel-table-column label分类别名 propcategoryAlias/el-table-columnel-table-column label操作 width100template #default{ row }el-button :iconEdit circle plain typeprimary clickshowDialog(row) /el-buttonel-button :iconDelete circle plain typedanger clickdeleteCategory(row)/el-button/template/el-table-columntemplate #emptyel-empty description没有数据 //template/el-table!– 添加分类弹窗 –el-dialog v-modeldialogVisible :titletitle width30%el-form :modelcategoryModel :rulesrules label-width100px stylepadding-right: 30pxel-form-item label分类名称 propcategoryNameel-input v-modelcategoryModel.categoryName minlength1 maxlength10/el-input/el-form-itemel-form-item label分类别名 propcategoryAliasel-input v-modelcategoryModel.categoryAlias minlength1 maxlength15/el-input/el-form-item/el-formtemplate #footerspan classdialog-footerel-button clickdialogVisible false取消/el-buttonel-button typeprimary clicktitle 添加分类 ? addCategory() : updateCategory() 确认 /el-button/span/template/el-dialog/el-card /templatestyle langscss scoped .page-container {min-height: 100%;box-sizing: border-box;.header {display: flex;align-items: center;justify-content: space-between;} } /style 在article.js完整代码 import request from /utils/request.js // import { useTokenStore } from /stores/token.js;export const ArticleCategoryListService (){//在请求拦截器添加了JWT令牌到请求头中return request.get(/category); } export const ArticleCategoryAddService (categoryData){return request.post(/category,categoryData); }//文章分类编辑 export const ArticleCategoryUpdateService (categoryData){return request.put(/category,categoryData); }//文章分类删除 export const ArticleCategoryDeleteService (id){return request.delete(/category?idid) } 好了今天的内容就到这里了下期继续更新大事件项目前后端开发感谢收看