1.安装node.js和脚手架等
此次省略，不写了，可以自行百度。
node -v #查看node.js版本2.使用Node.js创建项目，也可以使用vscode直接创建。
3.使用VScode打开项目，添加el-ui
点击终端安装
4.在src中mian.js中添加el
5.在src目录创建api文件夹添加axios
6.在src目录下的components下创建login.vue文件和home.vue文件
<template>
<!--<div id="login">
<h1> {{msg}}</h1>
</div>-->
<el-form ref='AccountFrom' :model='account' :rules='rules' lable-position='left' lable-width='0px' class='demo-ruleForm login-container'>
<h3 class="title">登录系统首页</h3>
<el-form-item prop="username">
<el-input type="text" v-model="account.username" auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="pwd">
<el-input type="password" v-model="account.pwd" auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" @click.native.prevent='handleLogin' :loading= 'logining'>登录</el-button>
</el-form-item>
</el-form>
</template>
<script>
//引入api.js 好调用里面的接口
import {requestLogin} from '../api/api';
export default {
name: 'login',
data() {
return {
logining: false,
account: {
username: '',
pwd: ''
},
rules: {
username: [{
required: true,
message: '请输入账号',
trigger: 'blur'
}],
pwd: [{
required: true,
message: '请输入密码',
trigger: 'blur'
}]
},
checked: true
}
},
methods:{
handleLogin(){
this.$refs.AccountFrom.validate((valid)=>{
if(valid){
//验证通过 可以提交
this.logining = true;
//将提交的数据进行封装
var loginParams = {cUsername : this.account.username,cPwd:this.account.pwd};
//调用函数 传递参数 获取结果
requestLogin(loginParams).then(data=>{
this.logining = false;
if(data.code == '200'){
//登录成功
sessionStorage.setItem('access-token',data.token);
//用vue路由跳转到后台主界面
this.$router.push({path:'/home'});
}else{
this.$message({
message:data.msg,
type:'error'
});
}
})
}else{
console.log('error submit');
return false;
}
});
}
}
}
</script>
<style>
body {
background: #DFE9FB;
}
.login-container {
width: 350px;
margin-left: 35%;
}
</style>home.vue
<template>
<div>
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-input v-model="filters.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="getUsers">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="info" @click="addUser">新增</el-button>
</el-form-item>
</el-form>
</el-col>
<el-table
v-loading="listLoading"
:data="userInfoList"
element-loading-text="数据加载中"
border
fit
highlight-current-row>
<el-table-column prop="id" label="id" width="180">
</el-table-column>
<el-table-column prop="name" label="名字" width="180">
</el-table-column>
<el-table-column prop="pwd" label="密码" width="180">
</el-table-column>
<!--第二步 开始进行修改和查询操作-->
<el-table-column label="操作" align="center" min-width="100">
<template slot-scope="scope">
<el-button type="text" @click="checkDetail(scope.row)">查看详情</el-button>
<el-button type="info" @click="modifyUser(scope.row)">修改</el-button>
<el-button type="info" @click="deleteUser(scope.row)">删除</el-button>
</template>
</el-table-column>
<!--编辑与增加的页面-->
</el-table>
<!--新增界面-->
<el-dialog title="记录" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">
<el-form :model="addFormData" :rules="rules2" ref="addFormData" label-width="0px" class="demo-ruleForm login-container">
<el-form-item prop="name">
账号:<el-input type="text" v-model="addFormData.name" auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="pwd">
密码:<el-input type="password" v-model="addFormData.pwd" auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<el-form-item prop="age">
年龄:<el-input type="text" v-model="addFormData.age" auto-complete="off" placeholder="年龄"></el-input>
</el-form-item>
<el-form-item prop="skill">
爱好:<el-input type="text" v-model="addFormData.skill" auto-complete="off" placeholder="爱好"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click.native="dialogVisible = false,addFormData={id:'',name:'',pwd:'',age:'',skill:''}">取 消</el-button>
<el-button v-if="isView" type="primary" @click.native="addSubmit">确 定</el-button>
<el-button v-if="isView2" type="primary" @click.native="updatedUser()">确 定</el-button>
</span>
</el-dialog>
<el-pagination
:current-page="pageNo"
:page-size="pagesize"
:total="total"
style="padding: 30px 0; text-align: center;"
layout="total, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
import {
userList
} from '../api/api';
import axios from 'axios';
import qs from 'qs';
export default {
name: 'home',
data() {
return {
listLoading: true,
userInfoList: [],
addFormReadOnly: true,
dialogVisible: false,
isView: true,
isView2: false,
pageNo:1, //初始页
pagesize:3, // 每页的数据
page:1,
total: 0,
addFormData: {
id: '',
name: '',
pwd: '',
age:'',
skill:'',
},
rules2: {
name: [{
required: true,
message: '用户名不能为空',
trigger: 'blur'
}],
pwd: [{
required: true,
message: '密码不能为空',
trigger: 'blur'
}]
},
filters: {
name: ''
}
}
},
mounted: function () {
this.loadData();
},
methods: {
loadData() {
let param = {name:this.userInfoList.name}
this.listLoading = true
let pageNo = {pageNo:this.pageNo};
axios.post('/userInfo/getInfoListPage',qs.stringify(pageNo)).then((result) => {
var _data = result.data.data.pageInfo.records;
this.userInfoList = _data;
this.total=result.data.data.pageInfo.total;
this.listLoading = false;
});
},
getUsers() {
this.loadData();
},
addUser() {
this.addFormData = {
id: '',
name: '',
pwd: '',
age:'',
skill:''
};
this.isView = true;
this.dialogVisible = true;
// this.addFormReadOnly = false;
},
checkDetail(rowData) {
this.addFormData = Object.assign({}, rowData);
this.isView = false;
this.dialogVisible = true;
// this.addFormReadOnly = true;
},
modifyUser(rowData) {
this.addFormData = Object.assign({}, rowData);
this.isView2 = true;
this.dialogVisible = true;
this.isView = false;
// this.addFormReadOnly = false;
},
deleteUser(rowData) {
this.$confirm('是否删除这条记录', '信息删除', {
confirmButtonText: '确定',
cancelButtonText:'取消',
type: 'warning',
}).then(()=>{
var params = {
userId: rowData.id
};
axios.post("/userInfo/deleteInfo", qs.stringify(params)).then((result) => {
console.info(result);
if (result.data.success) {
this.$message({
type: 'info',
message: `已删除`
});
} else {
this.$message({
type: 'info',
message: `删除失败`
});
}
this.loadData();
})
}).catch(()=>{
this.$message({
type: 'info',
message: `取消删除`
});
});;
},
//增加一条记录
addSubmit() {
//先判断表单是否通过了判断
this.$refs.addFormData.validate((valid) => {
//代表通过验证 ,将参数传回后台
if (valid) {
let param = Object.assign({}, this.addFormData);
axios.post("/userInfo/saveInfo", qs.stringify(param)).then((result) => {
if (result.data.success) {
this.$message({
type: 'info',
message: '添加成功',
});
this.loadData();
} else {
this.$message({
type: 'info',
message: '添加失败',
});
}
this.dialogVisible = false;
});
}
});
},
updatedUser () {
let param = Object.assign({}, this.addFormData);
axios.post("/userInfo/updateInfo",qs.stringify(param)).then((result) => {
if (result.data.success) {
this.$message({
type: 'info',
message: '更新成功',
});
this.loadData();
} else {
this.$message({
type: 'info',
message: '更新失败',
});
}
this.dialogVisible = false;
});
},
handleSizeChange: function (size) {
this.pagesize = size;
console.log(this.pagesize) //每页下拉显示数据
},
handleCurrentChange: function(pageNo){
this.pageNo = pageNo;
this.loadData();
console.log(this.pageNo) //点击第几页
},
handleUserList() {
let pageNo= {pageNo:this.pageNo};
axios.post("/userInfo/getInfoListPage",qs.stringify(pageNo)).then((result) => { //这是从本地请求的数据接口，
this.userInfoList = result.date.data.pageInfo.records
this.total = result.data.date.pageInfo.total
this.pageNo=result.data.data.pageInfo.current
})
}
}
}
</script>
<style>
body {
background: #DFE9FB;
}
</style>7.配置路由
他默认的页面是src/components/HelloWorld.vue,如果项目到别的页面这个时候就要使用Router.。默认是在mian.js中配置了路由。
修改src目录的router目录学的index.js，把我们新增的login.vue和home.vue页面配置进来，用于跳转页面
8.启动项目npm run dev
9.Springboot中控制层
@RestController
@RequestMapping("/userInfo")
@CrossOrigin
public class UserInfoController {
@Autowired
private UserInfoService userInfoService;
@Autowired
UserInfoMapper userInfoDao;
@Autowired
DozerBeanMapper dozerBeanMapper;
@RequestMapping("/index")
public String index(){
return "index";
}
@RequestMapping("/add")
public String add(){
return "add";
}
@PostMapping("/login")
public ReturnResult loginUser(LoginUser loginUser){
if ("zhulin".equals(loginUser.getCUsername())&&"123".equals(loginUser.getCPwd())){
return ReturnResult.ok();
}
return ReturnResult.error();
}
/**
* 根据ID获取用户信息
* @Param userId 用户ID
* @Return UserInfoEntity 用户实体
*/
@RequestMapping("/getInfo/{userId}")
public String getInfo(@PathVariable("userId") String userId, Model model) throws Exception{
if ("".equals(userId)){
// new Exception(ResultCodeEnum.NULL_ERROR);
return null;
}
UserInfo userInfoEntity = userInfoService.getById(userId);
model.addAttribute("userInfoEntity",userInfoEntity);
return "mian";
}
/**
* 查询全部信息
* @Author Sans
* @Return List<UserInfoEntity> 用户实体集合
*/
@RequestMapping("/getList")
public ReturnResult getList(String name) throws Exception{
if (name!=null&&!"".equals(name)){
List<UserInfo> userInfoEntities = userInfoService.likeName(name);
return ReturnResult.ok().data("userInfoList",userInfoEntities);
}
List<UserInfo> userInfoEntityList = userInfoService.list();
return ReturnResult.ok().data("userInfoList",userInfoEntityList);
}
/**
* 分页查询全部数据
* @Return IPage<UserInfoEntity> 分页数据
*/
@RequestMapping("/getInfoListPage")
public ReturnResult getInfoListPage(String pageNo, Model model) {
//需要在Config配置类中配置分页插件
Map<String,Object> map = new HashMap<>();
QueryWrapper<UserInfo> queryWrapper = new QueryWrapper<>();
queryWrapper.orderByDesc("id");
Page<UserInfo> page = new Page<>(Integer.parseInt(pageNo),3); // 查询第1页，每页返回5条
IPage<UserInfo> infoEntityIPage = userInfoDao.selectPage(page, queryWrapper);
boolean searchCount = infoEntityIPage.isSearchCount();
System.out.println(searchCount);
//System.out.println(sql);
// model.addAttribute("c",infoEntityIPage);
return ReturnResult.ok().data("pageInfo",infoEntityIPage);
}
/**
* 根据指定字段查询用户信息集
* @Return Collection<UserInfoEntity> 用户实体集合
*/
@RequestMapping("/getListMap")
public Collection<UserInfo> getListMap(){
Map<String,Object> map = new HashMap<>();
//kay是字段名 value是字段值
map.put("age",20);
Collection<UserInfo> userInfoEntityList = userInfoService.listByMap(map);
return userInfoEntityList;
}
/**
* 新增用户信息
*/
@PostMapping("/saveInfo")
@ResponseBody
public ReturnResult saveInfo(@Valid UserVO userVO) throws Exception{
BeanUtils.copyProperties(userVO, new UserInfo());
UserInfo userInfoEntity = dozerBeanMapper.map(userVO, UserInfo.class);
userInfoService.save(userInfoEntity);
Long id = userInfoEntity.getId();//插入数据后直接可以获取插入的主键id。
System.out.println(id);
return ReturnResult.ok();
}
/**
* 批量新增和更新用户信息
*/
@RequestMapping("/saveInfoList")
public void saveInfoList(){
//创建对象
UserInfo sans = new UserInfo();
sans.setName("Sans");
sans.setSkill("睡觉");
sans.setAge(18);
sans.setFraction(60L);
sans.setEvaluate("Sans是一个爱睡觉,并且身材较矮骨骼巨大的骷髅小胖子");
UserInfo papyrus = new UserInfo();
papyrus.setName("papyrus");
papyrus.setSkill("JAVA");
papyrus.setAge(18);
papyrus.setFraction(58L);
papyrus.setEvaluate("Papyrus是一个讲话大声、个性张扬的骷髅，给人自信、有魅力的骷髅小瘦子");
//批量保存
List<UserInfo> list =new ArrayList<>();
list.add(sans);
list.add(papyrus);
userInfoService.saveBatch(list);
userInfoService.updateBatchById(list,1000);//每次更新多少条
//userInfoService.updateBatchById(list);//全部更新
}
/**
* 更新用户信息
*/
@PostMapping("/updateInfo")
@ResponseBody
public ReturnResult updateInfo(@Valid UserVO userVO){
//根据实体中的ID去更新,其他字段如果值为null则不会更新该字段,参考yml配置文件
UserInfo userInfoEntity = dozerBeanMapper.map(userVO, UserInfo.class);
boolean update = userInfoService.updateById(userInfoEntity);
if (update){
return ReturnResult.ok();
}else{
return ReturnResult.error();
}
}
/**
* 新增或者更新用户信息
*/
@RequestMapping("/saveOrUpdateInfo")
public void saveOrUpdate(){
//传入的实体类userInfoEntity中ID为null就会新增(ID自增)
//实体类ID值存在,如果数据库存在ID就会更新,如果不存在就会新增
UserInfo userInfoEntity = new UserInfo();
userInfoEntity.setId(1L);
userInfoEntity.setAge(20);
userInfoService.saveOrUpdate(userInfoEntity);
}
/**
* 根据ID删除用户信息
*/
@RequestMapping("/deleteInfo")
public ReturnResult deleteInfo(String userId){
userInfoService.removeById(userId);
return ReturnResult.ok().data("success",true);
}
/**
* 根据ID批量删除用户信息
*/
@RequestMapping("/deleteInfoList")
public void deleteInfoList(){
List<String> userIdlist = new ArrayList<>();
userIdlist.add("12");
userIdlist.add("13");
userInfoService.removeByIds(userIdlist);
}
/**
* 根据指定字段删除用户信息
*/
@RequestMapping("/deleteInfoMap")
public void deleteInfoMap(){
//kay是字段名 value是字段值
Map<String,Object> map = new HashMap<>();
map.put("skill","删除");
map.put("fraction",10L);
userInfoService.removeByMap(map);
}
}在config中可以配置端口号
10.访问http://localhost:9528
根据数据的登录名称填写登录账号密码成功之后
为了清晰一点附上源码吧！可以直接下载运行前端的项目。后端导入项目。
链接: https://pan.baidu.com/s/1f27IZaGalpXyxohQ41Maxg 提取码: whip
11.建表语句
CREATE TABLE `user_info` (
`id` INT(20) NOT NULL AUTO_INCREMENT,
`name` VARCHAR(10) DEFAULT NULL,
`age` INT(3) DEFAULT NULL,
`skill` VARCHAR(50) DEFAULT NULL,
`evaluate` VARCHAR(100) DEFAULT NULL,
`sex` INT(1) DEFAULT NULL,
`pwd` VARCHAR(20) DEFAULT NULL,
`fraction` INT(3) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8