1.Vue配置
vue-cli 安装
https://cli.vuejs.org/zh/guide/installation.html
npm设置淘宝镜像(cmd)
npm config set registry http://registry.npm.taobao.org
创建vue项目(cmd)
vue create vue1
运行vue项目(cmd)
cd vue1//在该项目下
npm run serve
配置element教程
https://element.eleme.cn/#/zh-CN/component/quickstart
在main.js中配置element,加
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
配置启动vue的方式
Edit Configurations - npm
测试生效HomeView.vue
2.Springboot配置
File - New - Project - Spring Initializr 创建SpringBoot项目
pom.xml配置阿里云仓库(放到xml的最后)
<repositories>
<repository>
<id>public</id>
<name>aliyun nexus</name>
<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
<releases>
<enabled>true</enabled>
</releases>
</repository>
</repositories>
<pluginRepositories>
<pluginRepository>
<id>public</id>
<name>aliyun nexus</name>
<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
<releases>
<enabled>true</enabled>
</releases>
<snapshots>
<enabled>false</enabled>
</snapshots>
</pluginRepository>
</pluginRepositories>
File - Settings - 搜索Maven 下载maven依赖
删除无用内容(暂时没用以后再纠结原因)
配置数据库和端口 application.properties
//连接数据库
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/数据库名?serverTimezone=GMT%2b8
spring.datasource.username=用户名
spring.datasource.password=密码
//配置端口防止前后端端口冲突
server.port=9090
tips:数据库字符编码选择
更改配置文件后缀名为yml(同时更改配置文件内部语法)
连接数据库、Mybatis配置
lombok
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data //getter&setter方法
@NoArgsConstructor //无参构造方法
@AllArgsConstructor //有参构造方法
public class User {
private Integer id;
private String username;
private String password;
private String nickname;
private String email;
private String phone;
private String address;
}
sql语句的使用
import org.apache.ibatis.annotations.Select;
import com.hedonism.springboot.entity.User;
import java.util.List;
public interface UserMapper {
@Select("SELECT * FROM sys_user")
List<User> findAll();
}
}