2020年win7升级到win10系统的方法
675 2023-04-03 05:19:58
在application.properties里面填写最大上传文件大小的配置信息
spring.servlet.multipart.max-file-size=10MB
在application.properties里面填写配置静态资源文件夹的信息
#配置静态文件夹,默认是static文件夹,classpath:static代表默认的
spring.web.resources.static-locations=file:D:/files,classpath:static
创建coolshark项目, 打3个勾
从上一个工程中复制application.propertise 里面所有内容到新工程,然后停掉之前工程 运行新工程测试是否能够正常启动(如果不能启动 删除工程重新创)
把讲前端时做好的页面添加到工程中, 3个文件夹和4个页面, 添加完之后Rebuild工程 , 然后运行工程访问首页检查是否正常显示
修改application.propertise里面数据库的名字为cs
spring.datasource.url=jdbc:mysql://localhost:3306/cs?characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false
建库建表
create database cs charset=utf8;
use cs;
create table user(id int primary key auto_increment,username varchar(50),password varchar(50),nick varchar(50))charset=utf8;
insert into user values(null,'admin','123456','管理员');
修改登录页面 给按钮添加点击事件, 点击时向/login发出请求
创建User实体类
创建UserMapper 添加 登录相关方法
创建表和准备数据
create table category(id int primary key auto_increment,name varchar(50))charset=utf8;
insert into category values(null,"男装"),(null,"女装"),(null,"医药"),(null,"美食"),(null,"百货"),(null,"数码");
创建Category实体类
创建CategoryMapper,里面提供insert和select两个方法
创建CategoryController 里面添加select方法处理/category/select
在首页index.html页面中的created方法中向/category/select发出请求获取所有分类信息, 把查询到的数据赋值给一个数组变量 , 让页面中显示分类的地方 和数组进行绑定 通过v-for指令显示出所有分类信息
创建保存轮播图的表和轮播图数据
create table banner(id int primary key auto_increment,url varchar(255))charset=utf8;
insert into banner values(null,'/imgs/b1.webp'),(null,'/imgs/b2.webp'),(null,'/imgs/b3.webp'),(null,'/imgs/b4.webp');
在首页index.html页面中的created方法里面向/banner/select发出请求把得到的数据赋值给vue里面的bannerArr数组
//发出请求获取所有轮播图信息axios.get("/banner/select").then(function (response) { v.bannerArr = response.data;})
创建BannerController 添加select方法处理/banner/select请求
package cn.tedu.coolshark.controller;
import cn.tedu.coolshark.entity.Banner;
import cn.tedu.coolshark.mapper.BannerMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.io.File;
import java.util.List;
@RestController
public class BannerController {
@Autowired(required = false)
BannerMapper mapper;
@RequestMapping("/banner/select")
public List<Banner> select(){
return mapper.select();
}
@RequestMapping("/banner/delete")
public void delete(int id){
//先查询到轮播图的url
String url = mapper.selectUrlById(id);
// aaa.webp F:/files/aaa.webp
//得到文件的完整磁盘路径
String filePath = "F:/files/"+url;
//创建文件对象并删除
new File(filePath).delete();
mapper.deleteById(id);
}
@RequestMapping("/banner/insert")
public void insert(@RequestBody Banner banner){
mapper.insert(banner);
}
}
创建Banner实体类
package cn.tedu.coolshark.entity;
public class Banner {
private Integer id;
private String url;
@Override
public String toString() {
return "Banner{" +
"id=" + id +
", url='" + url + '\'' +
'}';
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
}
创建BannerMapper 里面提供select方法
package cn.tedu.coolshark.mapper;
import cn.tedu.coolshark.entity.Banner;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.List;
@Mapper
public interface BannerMapper {
@Select("select * from banner")
List<Banner> select();
@Delete("delete from banner where id=#{id}")
void deleteById(int id);
@Select("select url from banner where id=#{id}")
String selectUrlById(int id);
@Insert("insert into banner values(null,#{url})")
void insert(Banner banner);
}
在admin.html页面中先引入 axios框架
<script src="js/axios.min.js"></script>
在页面中添加created方法 在里面向/category/select发请求获取所有分类数据, 把得到的数据赋值给categoryArr数组,页面会自动展示
created:function () {
axios.get("/category/select").then(function (response) {
v.categoryArr = response.data;
})}
3.给删除添加点击事件调用categoryDelete方法,参考Web阶段day07的员工列表练习
<!--confirm确认事件-->
<el-popconfirm @confirm="categoryDelete(scope.$index, scope.row)"
title="这是一段内容确定删除吗?">
<el-button size="mini" type="danger" slot="reference">删除</el-button>
</el-popconfirm>
在方法中向/category/delete发出请求并且把分类的id传递过去
categoryDelete(index,category){
axios.get("/category/delete?id="+category.id).then(function () {
//splice(下标,长度)方法是JavaScript中数组删除元素的方法
v.categoryArr.splice(index,1);
})
}
在CategoryController中添加delete方法 处理/category/delete请求,方法中调用mapper里面的deleteById方法
@RequestMapping("/category/delete")
public void delete(int id ){
System.out.println("删除分类的id = " + id);
mapper.deleteById(id);
}
实现mapper里面的deleteById方法
@Delete("delete from category where id=#{id}")
void deleteById(int id);
在点击添加分类时弹出文本输入框 :menuChange(index)
if (index=="1-2"){
//弹出输入框
v.$prompt("请输入分类名称","提示",{
confirmButtonText:"确定",
cancelButtonText:"取消"
}).then(function (object) {
console.log("分类名称:"+ object.value);
在then方法里面 向/category/insert发出异步请求 把分类的名称拼接到请求地址的后面
then(function (object) {
console.log("分类名称:"+ object.value);
let name = object.value;
if (name==null||name.trim()==""){
v.$message.error("分类名称不能为空");
return;
}
axios.get("/category/insert?name="+name).then(function (response) {
location.reload();
})
CategoryController里面创建insert方法处理/category/insert, 在参数列表中声明Category对象 用来接受传递过来的参数,调用mapper里面的insert方法
@RequestMapping("/category/insert")
public void insert(Category category){
mapper.insert(category);
}
实现CategoryMapper里面的insert方法
@Insert("insert into category values(null,#{name})")
void insert(Category category);
在admin.html页面中给删除按钮添加点击事件调用bannerDelete方法
<!--confirm确认事件-->
<el-popconfirm @confirm="bannerDelete(scope.$index, scope.row)"
title="这是一段内容确定删除吗?">
<el-button size="mini"
type="danger" slot="reference">删除</el-button>
</el-popconfirm>
在方法中发出删除请求
bannerDelete(index,banner){
axios.get("/banner/delete?id="+banner.id).then(function () {
v.bannerArr.splice(index,1);
})
}
在BannerController中添加delete方法处理/banner/delete请求 方法中调用mapper的deleteById方法
@RequestMapping("/banner/delete")
public void delete(int id){
//先查询到轮播图的url
String url = mapper.selectUrlById(id);
// aaa.webp F:/files/aaa.webp
//得到文件的完整磁盘路径
String filePath = "F:/files/"+url;
//创建文件对象并删除
new File(filePath).delete();
mapper.deleteById(id);
}
实现mapper中的deleteById方法
@Delete("delete from banner where id=#{id}")
void deleteById(int id);