游戏网站建设与策划,上海网站建设多少,东莞营销型网站开发,网站开发设计师薪资简单宿舍管理系统#xff08;springbootvue#xff09; 1.创建项目1.前端2.数据库3.后端 2.登陆1.前端1.准备工作2.登陆组件3.配置 2.后端1.链接数据库2.创建用户实体类3.数据操作持久层1.配置2.内容3.测试 4.中间业务层1.异常2.业务实现3.测试 5.响应前端控制层 3.前后对接4… 简单宿舍管理系统springbootvue 1.创建项目1.前端2.数据库3.后端 2.登陆1.前端1.准备工作2.登陆组件3.配置 2.后端1.链接数据库2.创建用户实体类3.数据操作持久层1.配置2.内容3.测试 4.中间业务层1.异常2.业务实现3.测试 5.响应前端控制层 3.前后对接4.效果 3.后台管理 最近看了springboot和vue为了练一下把前后端打通就自己手动写个简单的系统测试一下把代码放在仓库。 1.创建项目
1.前端
我的前端项目名叫Dormitory然后添加插件element-plus页面设计和axios后端交互。
npm init vuelatest#这里插件下载我都选no之后自己会手动下载使用
cd Dormitory
npm install
npm install element-plus
npm install axios
npm run dev2.数据库
首先创建库第一个是登陆功能我就顺便创建一个简单的用户表t_user。
mysql -u root -p
create database dormitory;
use dormitory;
use store
CREATE TABLE t_user (uid INT AUTO_INCREMENT COMMENT 用户id,username VARCHAR(20) NOT NULL UNIQUE COMMENT 用户名,password CHAR(32) NOT NULL COMMENT 密码,role INT COMMENT 角色,name VARCHAR(20) NOT NULL UNIQUE COMMENT 姓名,gender INT COMMENT 性别:0-女1-男,telephone VARCHAR(50) COMMENT 手机号,PRIMARY KEY (uid)
) ENGINEInnoDB DEFAULT CHARSETutf8;3.后端
创建项目名叫dormitory_b,依赖库我用了三个spring webmybatis framework,mysql driver然后配置一下jdk和maven环境和xml即可。
2.登陆
登陆这里我把uid和role保存到后端session中username保存到前端cookie中而且密码啥的我也没加密就怎么简单怎么来。
1.前端
1.准备工作
这里我用到element-plus和icon而且我是按需引入所以首先下载插件
npm install -D unplugin-vue-components unplugin-auto-import
npm install element-plus/icons-vue然后在vite.config.ts按需引入element-plus
import { fileURLToPath, URL } from node:url
import AutoImport from unplugin-auto-import/vite
import Components from unplugin-vue-components/vite
import { ElementPlusResolver } from unplugin-vue-components/resolvers
import { defineConfig } from vite
import vue from vitejs/plugin-vueexport default defineConfig({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))}}
});在main.ts里将icon全局注册到App上
import * as ElementPlusIconsVue from element-plus/icons-vue
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}就可以使用svg方式使用 el-iconMenu //el-icon然后配置路由用到了router所以先下载
npm install vue-router 然后在src里面建一个router文件夹里面建一个index.js写路由配置文件然后在main.js里面挂载一下
import router from ./router;
app.use(router)2.登陆组件
这里登陆页面我写在了LoginView里面后面我会配置路由和组件。
templatediv classlogin-containerdiv classlogin-formel-form reflogin-form :modelloginForm label-width80px :rulesrulesel-form-item label用户名 propusernameel-input v-modelloginForm.username/el-input/el-form-itemel-form-item label密码 proppasswordel-input typepassword v-modelloginForm.password/el-input/el-form-itemel-form-item label角色 proproleel-radio-group v-modelloginForm.roleel-radio labeladmin系统管理员/el-radioel-radio labeldorm宿舍管理员/el-radio/el-radio-group/el-form-itemel-form-item sizelargeel-button typeprimary clicktoLogin登录/el-button/el-form-item/el-form/div/div/templatescriptimport { ref } from vue;import axios from axios;export default {setup() {const loginForm ref({username: ,password: ,role: admin,});const rules {username: [{ required: true, message: 请输入用户名, trigger: blur }],password: [{ required: true, message: 请输入密码, trigger: blur }],role: [{ required: true, message: 请选择角色, trigger: change }],};const performLogin async () {try {const formData new FormData();//axios默认是json格式发送数据但我后端接受的是user所以将数据放到表单formData.append(username, loginForm.value.username);formData.append(password, loginForm.value.password);formData.append(role,loginForm.value.roleadmin?0:1);const response await axios.post(http://localhost:8080/users/login, formData);const data response.data;if (data.state 200) {// 登录成功后保存用户名到cookiedocument.cookie username${loginForm.value.username}; expires; path/;alert(登录成功);} else if (data.state 400) {alert(用户名错误);} else if (data.state 401) {alert(密码错误);}else if (data.state 402) {alert(角色错误);}} catch (error) {console.error(An error occurred:, error);}};const toLogin () {performLogin();};return {loginForm,rules,toLogin,};},};/scriptstyle scoped.login-container {display: flex;align-items: center;justify-content: center;height: 100vh;}.login-form {padding: 80px;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}/style
3.配置
首先是在router/index.js里面写路由配置将这个页面路由配置一下
import { createRouter, createWebHistory } from vue-router
import LoginView from /components/LoginView.vue
const router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: /login,component: LoginView}]
})
export default router然后在App.vue里面写一下这个路由出口
templateRouterView/RouterView
/template此时就可以通过http://localhost:5173/login/访问到这个页面。
2.后端
1.链接数据库
在application.properties中配置数据库。
spring.datasource.urljdbc:mysql://localhost:3306/dormitory?useUnicodetruecharacterEncodingutf-8
spring.datasource.usernameroot
spring.datasource.passwordroot2.创建用户实体类
在entity/User类里面创建用户实体类和getsetequaltostring方法mac的快捷键是commandn。
public class User {private Integer uid;private String username;private String password;private Integer role;private String name;private Integer gender;private String phone;
}3.数据操作持久层
1.配置
首先是配置一下mapper层在启动类里面添加项目的mapper路径让自动扫包。
MapperScan(com.hckj.dormitory_b.mapper)在application.properties中配置mapper地址。
mybatis.mapper-locationsclasspath:mapper/*.xml2.内容
在mapper/UserMapper接口里面写SQL语句的抽象方法(类添加Mapper注解)然后resources/mapper/UserMapper.xml里面写抽象方法的映射文件这里放在resource是因为xml是静态文件。
User findByUsername(String username);//接口
?xml version1.0 encodingUTF-8 ?
!DOCTYPE mapperPUBLIC -//mybatis.org//DTD Mapper 3.0//ENhttp://mybatis.org/dtd/mybatis-3-mapper.dtd
mapper namespacecom.hckj.dormitory_b.mapper.UserMapperselect idfindByUsername resultTypecom.hckj.dormitory_b.entity.Userselect * from t_user where username#{username}/select
/mapper3.测试
为了登陆测试这里先给数据库里面插入一条数据
INSERT INTO t_user (username, password, name,role, gender, telephone)
VALUES (zoe, 111, dz, 0, 0,188);然后测试(测试类加注解SpringBootTest和RunWith(SpringRunner.class)) Autowiredprivate UserMapper userMapper;Testpublic void findByUsername(){System.out.println(userMapper.findByUsername(zoe));}4.中间业务层
1.异常
在登录这个业务里会出现用户没有查询到和密码不匹配所以在service的ex包里面创建UsernameNotFoundException和PasswordNotMatchException异常类还有一个是角色不匹配RoleNotMatchException并都继承RuntimeException然后生成抛出异常的5种构造方法。
2.业务实现
然后写业务层的接口加Service注解并写类实现这个接口。
User login(String username, String password,Integer role);//接口
Service
public class UserServiceImpl implements IUserService{Autowiredprivate UserMapper userMapper;Overridepublic User login(String username, String password,Integer role) {User result userMapper.findByUsername(username);if (result null) {throw new UsernameNotFoundException(用户数据不存在);}String password_ result.getPassword();if (!password_.equals(password)) {throw new PasswordNotMatchException(用户密码错误);}Integer role_result.getRole();if (!role_.equals(role)) {throw new RoleNotMatchException(用户角色错误);}User user new User();user.setUid(result.getUid());user.setUsername(result.getUsername());user.setRole(result.getRole());return user;}
}3.测试
SpringBootTest
RunWith(SpringRunner.class)
public class UserServiceTests {Autowiredprivate IUserService userService;Testpublic void login(){User user userService.login(zoe,111,0);System.out.println(user);}
}5.响应前端控制层
package com.hckj.dormitory_b.controller;import com.hckj.dormitory_b.entity.User;
import com.hckj.dormitory_b.service.IUserService;
import com.hckj.dormitory_b.service.ex.PasswordNotMatchException;
import com.hckj.dormitory_b.service.ex.RoleNotMatchException;
import com.hckj.dormitory_b.service.ex.UsernameNotFoundException;
import jakarta.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.HashMap;
import java.util.Map;RestController
RequestMapping(users)
public class UserController {Autowiredprivate IUserService userService;PostMapping(login)public MapString, Object login(User user, HttpSession session) {String username user.getUsername();String password user.getPassword();Integer roleuser.getRole();MapString, Object response new HashMap();try {User loggedInUser userService.login(username, password,role);session.setAttribute(uid,loggedInUser.getUid());//将用户的uid和role保存到sessionsession.setAttribute(role,loggedInUser.getRole());response.put(state, 200);response.put(message, 登陆成功);response.put(data, loggedInUser);} catch (UsernameNotFoundException e) {response.put(state, 400);response.put(message, 用户名未找到);response.put(data, null);} catch (PasswordNotMatchException e) {response.put(state, 401);response.put(message, 密码不正确);response.put(data, null);} catch (RoleNotMatchException e){response.put(state,402);response.put(message,角色不正确);response.put(data,null);}return response;}
}3.前后对接
对接这里其实就只是一个跨域问题这个就是在后端工程的config/WebMvcConfig类里面加入设置这里我前端的地址是http://localhost:5173
package com.hckj.dormitory_b.config;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
Configuration
public class WebMvcConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping(/**).allowedOrigins(http://localhost:5173).allowedMethods(GET, POST, PUT, DELETE).allowCredentials(true);}
}4.效果 3.后台管理
