travels:SpringBoot + Vue 搭建的旅游项目

>本文CSDN链接：[https://blog.csdn.net/weixin_43734095/article/details/106959586](https://blog.csdn.net/weixin_43734095/article/details/106959586) 好像没有必要一段段的把代码贴上来，毫无意义，不如把完整的项目放出来，基本有点基础的都可以看懂哈，然后博客记录一下遇到的问题和重要的知识点。。 > 项目 github 网址：[https://github.com/szluyu99/travels/tree/master](https://github.com/szluyu99/travels/tree/master) > 视频链接：[https://www.bilibili.com/video/BV1Nt4y127Jh?p=19](https://www.bilibili.com/video/BV1Nt4y127Jh?p=19) # 项目简介 **所需技术栈**： * 后端技术栈：**springboot** + **mybatis** * 前后端分离：axios、json * 前端技术栈、技术架构：Vue、node.js **前置知识**： * 了解 Vue 组件之前的知识 * 对 springboot + mybatis 较熟悉 开发流程： * 需求分析 * 库表设计 * 编码（项目环境搭建+编码） * 项目调试 * 项目部署上线 **需求分析**： * 用户模块：登录 + 注册 * 省份模块：一个省份可能存在多个景点 * 景点模块：一个景点对应多个省份 ## 项目演示 进入系统需登录：  用户注册页面：  省份列表页面：  添加省份页面：  修改省份页面：  景点列表页面：  添加景点页面：  修改景点页面：  ## 数据库建表 用户表 `t_user` —— 独立的表 * id、username、password、email 省份表 `t_province` [省份表 : 景点表] —— [1 : N] * id、name、tags、placecounts 景点表 `t_place` * id、name、picpath、hottime、hotticket、dimticket、placedes、provinceid(外键) --- 数据库名：`travels` 用户表 SQL： ```sql CREATE TABLE t_user( id INT(6) PRIMARY KEY AUTO_INCREMENT, username VARCHAR(60), password VARCHAR(60), email VARCHAR(60) ); ``` 省份表 SQL： ```sql CREATE TABLE t_province( id INT(6) PRIMARY KEY AUTO_INCREMENT, name VARCHAR(60), tags VARCHAR(80), placecounts INT(4) ); ``` 景点表 SQL： ```sql CREATE TABLE t_place( id INT(6) PRIMARY KEY AUTO_INCREMENT, name VARCHAR(60), picpath MEDIUMTEXT, hottime TIMESTAMP, hotticket DOUBLE(7,2), dimticket DOUBLE(7,2), placedes VARCHAR(300), provinceid INT(6) REFERENCES t_province(id) ); ``` # 环境搭建 利用 **Spring Initializr** 快速搭建 SpringBoot 项目。 ## 引入依赖（pom.xml） ```xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <!--继承springboot父项目--> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.3.1.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.yusael</groupId> <artifactId>mytravels</artifactId> <version>0.0.1-SNAPSHOT</version> <name>mytravels</name> <description>springboot + vue</description> <properties> <java.version>1.8</java.version> </properties> <dependencies> <!--web依赖--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!--mybatis依赖--> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.1.2</version> </dependency> <!--热部署--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <optional>true</optional> </dependency> <!--mysql--> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <!--lombok--> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> <!--druid--> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.1.12</version> </dependency> <!--test--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> </dependency> <!--文件上传--> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.4</version> </dependency> <!--测试--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> <exclusions> <exclusion> <groupId>org.junit.vintage</groupId> <artifactId>junit-vintage-engine</artifactId> </exclusion> </exclusions> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project> ``` ## 配置文件（application.properties） application.properties： ```properties server.port=8989 spring.application.name=travels spring.datasource.type=com.alibaba.druid.pool.DruidDataSource spring.datasource.driver-class-name=com.mysql.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/travels?characterEncoding=UTF-8 spring.datasource.username=root spring.datasource.password=1234 mybatis.mapper-locations=classpath:com/yusael/travels/mapper/*.xml mybatis.type-aliases-package=com.yusael.travels.entity logging.level.root=info logging.level.com.yusael.travels.dao=debug # 上传的图片存放的路径 upload.dir=D:/CodePro/IdeaPro/SpringBoot/travels/images spring.resources.static-locations=file:${upload.dir} ``` # href="javascript:;" 含义 代码中经常遇到这种写法： ```html <a href="javascript:;" @click="deleteProvince(province.id)">删除省份</a> ``` 其中的 `href="javascript:;"` 是什么意思呢？ * `javascript:` 表示在触发默认动作时，执行一段 JavaScript 代码； * `javascript:;` 表示什么都不执行，这样点击时就没有任何反应，相当于去掉 a 标签的默认行为。 # select - op