#创作灵感#
一:项目展示
1效果展示如下:
2首页:
3修改:
添加:
删除:
二:创建项目
1:创建后端代码
左侧导航栏选择Spring Initializr
点击下一步,选择Spring Web和Mysql Driver依赖如下图:
点击创建即可:
配置文件源码:
在resources下创建application.yml
配置文件代码如下:
##改变端口号
server:
port: 8081
#配置数据源 datasource
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/encryptdb?serverTimezone=UTC
username: root
password: root
#mybatis配置
mybatis:
type-aliases-package: org.spring.springboot.domain
mapper-locations: classpath:mapper/*.xml
我所用到的maven(在项目的pom.xml里面更改即可)依赖如下:
4.0.0
com.jl
Crud_Two
0.0.1-SNAPSHOT
Crud_Two
Crud_Two
1.8
UTF-8
UTF-8
2.6.13
org.projectlombok
lombok
true
org.springframework.boot
spring-boot-starter-jdbc
org.springframework.boot
spring-boot-starter-web
com.mysql
mysql-connector-j
runtime
org.mybatis.spring.boot
mybatis-spring-boot-starter
2.1.3
junit
junit
4.12
org.springframework.boot
spring-boot-starter-test
test
org.junit.vintage
junit-vintage-engine
org.springframework.boot
spring-boot-dependencies
${spring-boot.version}
pom
import
org.apache.maven.plugins
maven-compiler-plugin
3.8.1
1.8
UTF-8
org.springframework.boot
spring-boot-maven-plugin
${spring-boot.version}
com.jl.crud.CrudApplication
true
repackage
repackage
项目整体结构如下:
首先在Pojo目录下创建实体类User
源码:
package com.jl.crud_two.Pojo;
import lombok.Data;
/**
* @Author Jin
* @Description
* @Date 2024/1/6 14:52
**/
@Data
public class User {
private Integer id;
private String name;
private Integer age;
}
在Mapper目录下创建UserMapper:
源码:
package com.jl.crud_two.Mapper;
import com.jl.crud_two.Pojo.User;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
/**
* @Author Jin
* @Description
* @Date 2024/1/6 14:59
**/
@Mapper
public interface UserMapper {
/**
* 分页查询员工信息
* @param starRows
* @return 每一页的员工信息的集合
*/
public List queryPage(Integer starRows);
/**
* 每一行的个数
* @return
*/
public int getRowCount();
/**
* 插入
* @param user
* @return
*/
public int insertUser(User user);
/**
* 通过id删除员工信息
* @param id
* @return 是否成功
*/
public Integer delete(int id);
/**
* 更新员工信息
* @param user
* @return 是否成功
*/
public int Update(User user);
/**
* 根据id查询
* @param id
* @return
*/
public User byId(Integer id);
}
在Service目录下创建UserService:
源码:
package com.jl.crud_two.Service;
import com.jl.crud_two.Mapper.UserMapper;
import com.jl.crud_two.Pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* @Author Jin
* @Description
* @Date 2024/1/6 15:09
**/
@Service
public class UserService {
@Autowired
UserMapper userMapper;
/**
* 分页
* @param starRows
* @return
*/
public List queryPage(Integer starRows){
return userMapper.queryPage(starRows);
}
/**
* 每一行的个数
* @return
*/
public int getRowCount(){
return userMapper.getRowCount();
}
/**
* 插入
* @param user
* @return
*/
public User insertUser(User user){
userMapper.insertUser(user);
return user;
}
/**
* 通过id删除员工信息
* @param id
* @return 是否成功
*/
public Integer delete(int id){
return userMapper.delete(id);
}
/**
* 更新员工信息
* @param user
* @return 是否成功
*/
public int Update(User user){
return userMapper.Update(user);
}
/**
* 根据id查询
* @param id
* @return
*/
public User byId(Integer id){
return userMapper.byId(id);
}
}
在resources目录下创建mapper目录:
在mapper目录下创建UserMapper.xml
源码:
insert into user(name, age)
values (#{name}, #{age})
delete
from user
where id = #{id}
update user
set user.name=#{name},
user.age=#{age}
where user.id = #{id};
在Controller目录下创建UserController
源码:
package com.jl.cx.Controller;
import com.jl.cx.Pojo.User;
import com.jl.cx.Service.UserService;
import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
/**
* @Author Jin
* @Description
* @Date 2024/1/9 14:03
**/
@RestController
@RequestMapping("/UserController")
public class UserController {
@Autowired
UserService userService;
/**
* 通过员工id删除员工
*
* @param id
* @return
*/
@RequestMapping(value = "/delete", method = RequestMethod.POST)
public Integer delete(@Param("id") Integer id) {
System.out.println(id);
return userService.delete(id);
}
/**
* 更新员工
*
* @param user
* @return
*/
@RequestMapping(value = "/update", method = RequestMethod.POST)
@ResponseBody
public String update(@RequestBody User user) {
int result = userService.Update(user);
if (result >= 1) {
return "修改成功";
} else {
return "修改失败";
}
}
/**
* 插入员工
*
* @param user
* @return
*/
@RequestMapping(value = "/insert", method = RequestMethod.POST)
public User insert(@RequestBody User user) {
return userService.insertUser(user);
}
@RequestMapping(value = "/byId")
@ResponseBody
public User byId(Integer id) {
return userService.byId(id);
}
/**
* 查询页数
*
* @param page
* @return
*/
@RequestMapping(value = "/page", method = RequestMethod.POST)
@ResponseBody
public List page(Integer page) {
int pageNow = page == null ? 1 : page;//传入的页数是null 就查询第一页 否则就根据传入的页数进行查询
int pageSize = 5;
int startRows = pageSize * (pageNow - 1);//开始的行数
List list = userService.queryPage(startRows);
return list;
}
@RequestMapping(value = "rows")
@ResponseBody
public int rows() {
return userService.getRowCount();
}
}
后端代码编写完成,随后启动项目
vue开始操作!!!
2:创建vue项目
1:根据自己的需求,在对应的路径,输入cmd,
2:在cmd里面输入:vue ui,如下图:
3:点击create,开始创建vue项目
4:点击Create a new project here,开始创建项目,详细操作如下图:
注意:在创建项目的时候,系统给了3种方式创建项目。
①:默认创建操作都一样,这里以vue2版本为主,
②:选择第二个,如下图
③:等待系统创建
④:出现如下图,就代表这项目已成功创建,在这里可以对项目下载插件
⑤:通过开发软件,来启动项目,分别输入指令:
如下图:
首先输入:npm-install
以上下载依赖安装成功后,记得在main.xml里面引入依赖:
源码:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueRouter from 'vue-router'
// 前后端分离,必须装配这两个1.引入axios
import axios from 'axios'
// 引入elementUI
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import store from 'core-js/internals/shared-store'
Vue.config.productionTip = false
// 2.配置axios,Jquery对象$符号开头
Vue.prototype.$http = axios
Vue.config.productionTip = false
Vue.use(ElementUi, VueRouter)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
输入启动项目指令
npm run serve
看到该页面,项目创建成功
1:配置vue.config.js:
源码:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
lintOnSave: false, // 关闭eslint校验
transpileDependencies: true,
devServer: {
open: true, // 自动打开
port: 8081, // 设置端口号
host: '127.0.0.1', // 设置host
proxy: {
'/api': {
target: 'http://localhost:8081',
changeOrigin: true,
chunkOrigins: true,
pathRewrite: {
'^/api': ''
}
}
}
}
})
开始编写crud页面
创建首页vue界面,index.vue
源码:
添加
配置index路由:
源码:
import Vue from 'vue'
import VueRouter from 'vue-router'
import index from '../components/index.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'index',
component: index
}
]
const router = new VueRouter({
routes
})
export default router
创建修改vue界面,update
源码:
提交
取消
配置update路由:
源码:
import Vue from 'vue'
import VueRouter from 'vue-router'
import index from '../components/index.vue'
import update from '@/components/update.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'index',
component: index
},
{
path: '/update',
name: 'update',
component: update
}
]
const router = new VueRouter({
routes
})
export default router
创建添加vue界面,add.vue
源码:
添加
取消
配置add路由
源码:
import Vue from 'vue'
import VueRouter from 'vue-router'
import index from '../components/index.vue'
import update from '@/components/update.vue'
import add from '@/components/add.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'index',
component: index
},
{
path: '/update',
name: 'update',
component: update
},
{
path: '/add',
name: 'add',
component: add
}
]
const router = new VueRouter({
routes
})
export default router
由于删除是通过触发按钮进行操作的,所以删除没有单独的页面,删除功能在index界面。
项目下载地址:
链接:https://pan.baidu.com/s/15e5XQBth3lRpg9kK9JGlZg?pwd=2002
提取码:2002