vue+springboot低配版学习记录

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();
}
}