目录
开发环境
运行效果截图
项目结构
SpringBoot
Vue
本项目是学完SpringBoot 之后，拿来练习的。也可以快速上手SpringBoot。
前端采用Vue，能更值观的让我们感受到前后端分离的思想。
开发环境
- JDK 1.8
- Mysql 5.7
- Maven 3.5.4
- IDEA
- Vue
运行效果截图
新增组件用的是 富文本编译器
项目结构
SpringBoot
1.创建一个SpringBoot 项目
2.在pom.xml 中添加 web、jdbc、mybatis、mysql依赖
<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.1.0</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency>
</dependencies>此时，可以编写一个HelloController，测试一下环境是否成功！
3.搭建实验数据库
create database mis;
use mis;
drop table articles;
create table articles(id int auto_increment ,title varchar(100) ,content longtext ,cdate datetime default now(),thumbnail varchar(200) default 'upload/placeholder.png',primary key(id)
);4.编写实体类、Mapper类
package com.xm.pojo;public class Article {private Integer id;//流水号private String title;//标题private String content;//内容private String cdate;//日期private String thumbnail;//缩略图...
}package com.xm.mapper;
@Repository
public interface NewsMapper {//根据id查询public Article getById(Integer id);//查询全部public List<Article> list();//插入public int insert(Article article);//根据student的id修改public int update(Article article);//根据id删除public int delete(Integer id);
}5.编写对应的 Mapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.xm.mapper.NewsMapper"><!-- 查询所有新闻 --><select id="list" resultType="Article">select id,title,content,cdate,thumbnail from articles order by id desc</select><!-- 根据id查询 --><select id="getById" parameterType="Integer" resultType="Article">select id,title,content,cdate,thumbnail from articles where id=#{id}</select><!-- 插入一个新闻 --><insert id="insert" parameterType="Article" useGeneratedKeys="true" keyProperty="id" keyColumn="id">insert into articles (title,content,thumbnail) values(#{title},#{content},#{thumbnail})</insert><!-- 修改新闻 --><update id="update" parameterType="Article" >update articles set title=#{title},content=#{content}, thumbnail=#{thumbnail} where id=#{id}</update><!-- 删除新闻 --><delete id="delete" parameterType="Integer" >delete from articles where id=#{id}</delete>
</mapper>6.编写 application.yaml 配置文件
#端口，项目上下文根
server:port: 8080servlet:context-path: /news#配置mybatis
mybatis:#配置xml映射路径mapper-locations: classpath:mapper/*.xml#配置实体类的别名type-aliases-package: com.xm.pojoconfiguration:#开启驼峰命名法map-underscore-to-camel-case: true#配置mysql连接
spring:datasource:url: jdbc:mysql://localhost:3306/mis?serverTimezone=Asia/Shanghaiusername: rootpassword: 1234567.Controller层
package com.xm.controller;@CrossOrigin
@RestController
public class NewsController {@Autowiredprivate NewsMapper newsMapper;//根据id查询@GetMapping("/article/{id}")public Article getById(@PathVariable("id") Integer id) {Article article = newsMapper.getById(id);return article;}//查询全部@GetMapping("/articles")public List<Article> list(){List<Article> articles = newsMapper.list();return articles; }//插入@PostMapping("/article")public String insert(@RequestBody Article article) {int rows=newsMapper.insert(article);return "{\"rows\":\""+rows+"\"}" ;}//修改@PutMapping("/article")public String update(@RequestBody Article article) {int rows=newsMapper.update(article);return "{\"rows\":\""+rows+"\"}" ;}//根据id删除@DeleteMapping("/article/{id}")public String delete(@PathVariable("id") Integer id) {int rows=newsMapper.delete(id);return "{\"rows\":\""+rows+"\"}" ;}
}文件上传
package com.xm.controller;@CrossOrigin
@RestController
public class FileController {@PostMapping("/file")public String file(@RequestParam("myfile") MultipartFile myfile,HttpServletRequest request) throws IOException{//上传文件是否为空？if (!myfile.isEmpty()){//获取存放文件的路径String path = request.getServletContext().getRealPath("upload");//得到上传文件的文件名String filename = myfile.getOriginalFilename();//取文件扩展名String suffix = filename.substring(filename.lastIndexOf("."),filename.length());//随机的生存一个32的字符串,作为文件名filename = UUID.randomUUID()+suffix;//创建File对象File newFile = new File(path,filename);//判断文件父目录是否存在if(!newFile.getParentFile().exists()){ newFile.getParentFile().mkdir();}//通过CommonsMultipartFile的方法直接写文件myfile.transferTo(newFile);return "upload/"+filename;}else{return "";}}
}8.后端部分完成！
Vue
完整代码，在GitHub中托管 ?