SpringBoot + Vue 项目 — News

目录

开发环境

运行效果截图

项目结构

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: 8080
  servlet:
    context-path: /news
    
#配置mybatis
mybatis:
  #配置xml映射路径
  mapper-locations: classpath:mapper/*.xml
   #配置实体类的别名
  type-aliases-package: com.xm.pojo
  configuration:
    #开启驼峰命名法
    map-underscore-to-camel-case: true
    

#配置mysql连接
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/mis?serverTimezone=Asia/Shanghai
    username: root
    password: 123456

7.Controller层

package com.xm.controller;

@CrossOrigin
@RestController
public class NewsController {

	@Autowired
	private 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中托管  👀