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

产品网站更新内容微信小程序应用市场

wzjs 2025/8/31 7:31:29
产品网站更新内容,微信小程序应用市场,工业设计专业世界排名,网站开发基础培训先写前端再写后端 前提&#xff1a;ideavue3mybatisspringBoot3前后端分离实现对一张表的增删改查&#xff08;完整代码版&#xff09;-CSDN博客 项目地址 1.添加一个Login.vue视图 <template><div class"login_container"><div class"login…

先写前端再写后端

前提：idea+vue3+mybatis+springBoot3前后端分离实现对一张表的增删改查（完整代码版）-CSDN博客

项目地址

1.添加一个Login.vue视图

<template><div class="login_container"><div class="login_box"><div style="padding:20px;background-color: white;margin-left: 100px;border-radius: 20px;box-shadow:0 0  10px rgba(0,0,0.1)"><el-form ref="formRef" :rules="data.rules" :model="data.form" style="width:400px"  autocomplete="off" ><div style="margin-bottom:30px;font-size:20px;color:#0742b1;font-weight:bolder;text-align: center">欢迎登录后台管理系统</div><el-form-item style="margin-top: 20px;" prop="username" autocomplete="off"><el-input size="large"   v-model="data.form.username" placeholder="请输入账号" prefix-icon="User" ></el-input></el-form-item><el-form-item  prop="password"><el-input show-password="show-password" autocomplete="off" size="large" v-model="data.form.password" placeholder="请输入密码" prefix-icon="Lock"></el-input></el-form-item><div><el-button size="large" style="width: 48%" type="primary" @click="login()">登 录</el-button><el-button size="large" style="width: 48%" type="info">取 消</el-button></div><div style="text-align: right;margin-top: 20px;">还没有账号？请<a style="color: #0742b1;text-decoration: none;" href="/register">注册</a></div></el-form></div></div></div>
</template>
<script setup>
import { reactive,ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";const res = ref()
const data = reactive({form:{username:'',password:''},rules:{username:[{required:true,message:'请输入账号',trigger:'blur'}],password:[{required:true,message:'请输入密码',trigger:'blur'}]}
})
const formRef = ref()
const login = () => {formRef.value.validate((valid) => {if (valid) {request.post('/employee/login', data.form).then(res => {if (res.code === '200') {localStorage.setItem("zwy-user",JSON.stringify(res.data))//把json对象转换为字符串ElMessage.success('登录成功');location.href = '/manager/home'} else {ElMessage.error(res.msg); // 显示业务错误消息}}).catch(error => {if (error.response) {// 处理 HTTP 错误状态码（如 400）const { data } = error.response;if (data && data.msg) {ElMessage.error(data.msg); // 显示后端返回的错误消息} else {ElMessage.error('请求失败，请稍后重试');}} else {ElMessage.error('网络请求失败，请检查网络连接');}});}});
}</script>
<!--scoped表示当页生效-->
<style scoped>
.login_container{height: 100vh;overflow:hidden;background-image: url("@/assets/login_bg.png");background-size:cover ;background-position: 0 -40px;
}
.login_box{width: 50%;height: 100%;display: flex;align-items: center;right: 0;position: absolute;
}
</style>

背景图为下图 位置background-image: url("@/assets/login_bg.png");

2.添加一个Register.vue视图

<template><div class="Register_container"><div class="Register_box"><div style="padding:20px;background-color: white;margin-left: 100px;border-radius: 20px;box-shadow:0 0  10px rgba(0,0,0.1)"><el-form ref="formRef" :rules="data.rules" :model="data.form" style="width:400px" ><div style="margin-bottom:30px;font-size:20px;color:#0742b1;font-weight:bolder;text-align: center">欢迎注册后台管理系统</div><el-form-item style="margin-top: 20px;" prop="username"><el-input size="large" autocomplete="off" v-model="data.form.username" placeholder="请输入账号" prefix-icon="User" ></el-input></el-form-item><el-form-item  prop="password"><el-input show-password="show-password" autocomplete="off" size="large" v-model="data.form.password" placeholder="请输入密码" prefix-icon="Lock"></el-input></el-form-item><el-form-item  prop="confirmPassword"><el-input show-password="show-password" autocomplete="off" size="large" v-model="data.form.confirmPassword" placeholder="请再次输入密码" prefix-icon="Lock"></el-input>{{data.form.confirmPassword}}</el-form-item><div><el-button size="large" style="width: 48%" type="primary" @click="register()">注 册</el-button><el-button size="large" style="width: 48%" type="info">取 消</el-button></div><div style="text-align: right;margin-top: 20px;">已有账号？请<a style="color: #0742b1;text-decoration: none;" href="/login">登录</a></div></el-form></div></div></div>
</template>
<script setup>
import { reactive,ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";const res = ref()const validatePass = (rule, value, callback) => {if (!value) {callback(new Error('请再次输入密码'))} else if (value !== data.form.password) {callback(new Error("两次输入密码不一致!"))} else {callback()}
}
const data = reactive({form:{username:'',password:'',confirmPassword:''},rules:{username:[{required:true,message:'请输入账号',trigger:'blur'}],password:[{required:true,message:'请输入密码',trigger:'blur'}],confirmPassword:[{validator:validatePass,trigger:'blur'}]}
})
const formRef = ref()
const register = () => {formRef.value.validate((valid) => {if (valid) {request.post('/register', data.form).then(res => {if (res.code === '200') {ElMessage.success('注册成功');location.href = '/login'} else {ElMessage.error(res.msg); // 显示业务错误消息}}).catch(error => {if (error.response) {// 处理 HTTP 错误状态码（如 400）const { data } = error.response;if (data && data.msg) {ElMessage.error(data.msg); // 显示后端返回的错误消息} else {ElMessage.error('请求失败，请稍后重试');}} else {ElMessage.error('网络请求失败，请检查网络连接');}});}});
}</script>
<!--scoped表示当页生效-->
<style scoped>
.Register_container{height: 100vh;overflow:hidden;background-image: url("@/assets/login_bg.png");background-size:cover ;background-position: 0 -40px;
}
.Register_box{width: 50%;height: 100%;display: flex;align-items: center;right: 0;position: absolute;
}
</style>

3.添加两个视图的路由

下面是index.js的完整代码

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',redirect: '/login',},{path: '/button',name: 'button',component: () => import('../views/Button.vue'),},{path:'/manager',name:'manager',component:()=>import('../views/Manager.vue'),children:[{path:'/manager/employeeDataOp',name:'employeeDataOp',meta:{title:'员工数据操作'},component:()=>import('../views/employeeDataOp.vue')},{path:'/manager/home',name:'home',meta:{title:'首页'},component:()=>import('../views/home.vue')},{path:'/manager/adminDataOp',name:'adminDataOp',meta:{title:'管理员数据操作'},component:()=>import('../views/adminDataOp.vue')}]},{path:'/login',name:'login',meta:{title:'登录界面'},component:()=>import('../views/Login.vue')},{path:'/form',name:'form',component:()=>import('../views/form.vue')},{path:'/register',name:'register',meta:{title:'注册界面'},component:()=>import('../views/Register.vue')},{path:'/404',name:'404',meta:{title:'404'},component:()=>import('../views/404.vue')},{path:'/:pathMatch(.*)*',redirect:'/404',}],
})
router.beforeEach((to,from,next)=>{document.title=to.meta.title;next()
})export default router

4.后端添加两个功能的API接口

EmployeeController.java文件

    @PostMapping("/login")public Result login(@RequestBody Employee employee){Employee findEmployee = employeeService.login(employee);return Result.success(findEmployee);}@PostMapping("/register")public Result register(@RequestBody Employee employee){Employee employee1 = employeeService.register(employee);return Result.success(employee1);}

5.为接口添加业务层方法

  public Employee login(Employee employee) {Employee findEmployee = employeeMapper.selectByUsername(employee.getUsername());if (findEmployee == null){throw new ServiceException(ErrorCode.EMPLOYEE_NOT_FOUND);}if (!findEmployee.getPassword().equals(employee.getPassword())){throw new ServiceException(ErrorCode.EMPLOYEE_LOGIN_ERROR);}return findEmployee;}public Employee register(Employee employee){Employee findEmployee = employeeMapper.selectByUsername(employee.getUsername());employee.setRole("EMP");employee.setName("默认名称");employee.setGender("男");employee.setTitle("普通员工");employee.setBirthday(new Date());if (findEmployee != null){throw new ServiceException(ErrorCode.EMPLOYEE_REGISTER_ERROR_USERNAME);}int row =  employeeMapper.insert(employee);if(row!=1){throw new ServiceException(ErrorCode.EMPLOYEE_ADD_ERROR);}return employee;}

添加依赖

    <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.37</version></dependency>

对这里将原先的EmployeeServcieException.java改为ServcieException.java

然后ErrorCode加几个常量下面是完整代码

package com.cdp.zwy.zwy_manager_back_v1.common;/*** @description: 业务异常枚举类* @author bug制作者* @date 2025/4/6 20:40* @version 1.0*/public enum ErrorCode {NOT_DATA("10000","没有数据"),EMPLOYEE_NOT_FOUND("10001", "该员工不存在"),EMPLOYEE_ADD_ERROR("10002", "添加员工失败"),EMPLOYEE_DELETE_ERROR("10003", "删除员工失败"),EMPLOYEE_MODIFY_ERROR("10004", "修改员工失败"),EMPLOYEE_LOGIN_ERROR("10005", "登录失败"),EMPLOYEE_REGISTER_ERROR_USERNAME("10006","不能注册，该用户已经存在");private final String code;private final String msg;ErrorCode(String code, String msg) {this.code = code;this.msg = msg;}public String getCode() {return code;}public String getMsg() {return msg;}}

测试接口

http://www.dtcms.com/wzjs/553973.html

相关文章：

  • net域名大网站什么是主机托管
  • 网站如何做seo排名yzipi wordpress
  • 龙岗网站建设服务wordpress 置顶字段
  • 看守所加强自身网站建设工作临安市规划建设局网站
  • 网站设计尺寸大小莱芜金点子招聘电子版
  • 一些做设计素材的网站电子商务网站建设汉狮
  • 大城县网站建设网站 绝对路径 相对路径
  • 网站快速排名互点软件百度推广后台登录首页
  • 义乌网站建设技术托管惠州电商网站建设
  • 西安将军山网站建设淘宝网pc首页
  • wordpress文章不在首页显示如何做360网站优化
  • 网站建设公司特点北京网站建设公司哪家实惠
  • 简单的网站建设公司的模板做的比较好的冷柜网站有哪些
  • 站长工具seo综合查询怎么用富文本编辑器wordpress
  • 网站建设合同是谁开的中国建设银行杭州分行网站
  • 高端品牌网站建设(杭州)厦门做网站排名
  • 建网站的价格wordpress链接数据库文件夹
  • 襄阳网站建设需要多少钱企业网站 手机站
  • 适响应式网站弊端wordpress 购物 手机站
  • 如何介绍网站模板一键制作单页网站
  • 多平台网站设计实例做网站线
  • 中国建设标准化协会网站wordpress x theme
  • 站长工具seo源码大型网站开发框架有哪些
  • 个人建网站多少钱海珠做网站公司
  • 程序源码网站建设一个视频网站需要什么时候开始
  • 深圳城乡和建设局网站湖南十大龙头企业
  • 网站开发属于哪个类目阿里云 wordpress搭建网站
  • 杭州网站开发平均工资辽阳建设网站找哪家
  • 音乐介绍网站怎么做的专业网站建设找哪家公司
  • 电脑做系统哪个网站比较好工信部网站备案平台