vue管理系统构建步骤
ps:目前这个项目只是有一个大致的框架,并没有做完
前期准备工作
前端构建工具:Visual Studio Code
后端构建工具:IDEA
数据库和服务器构建工具:WampServer (使用的是2.4.23版本对的apache,5.7.14版本的MySQL)
安装10.0以上版本的node
前端构建–采用vue+element-ui (vue使用的是3.0以上的版本)
1.使用指令vue create project 然后选择相关选项
2.构建项目目录
2.1 vue3.0版本一下目录结构
build 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管。
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
config 配置目录,默认配置没有问题,所以我们也不用管
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
node_modules 这个目录是存放我们项目开发依赖的一些模块,这里面有很多很多内容,不过高兴的是,我们也不用管
src 我们的开发目录,基本上绝大多数工作都是在这里开展的
static 资源目录,我们可以把一些图片啊,字体啊,放在这里。
| |-- assets // 资源目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件,加载各种公共组件
test 初始测试目录,没用,删除即可
.xxxx文件 这些是一些配置文件,包括语法配置,git配置等。基本不用管,放着就是了
index.html 首页入口文件,基本不用管,如果是开发移动端项目,可以在head区域加上你合适的meta头
package.json 项目配置文件。前期基本不用管,但是你可以找一下相关的资料,学习一下里面的各项配置。至少,要知道分别是干嘛的。初期就不管了。
README.md 不用管
2.2vue3.0项目结构
noed_modules 这个目录是存放我们项目开发依赖的一些模块,这里面有很多很多内容,不过高兴的是,我们也不用管
public 存放index.html和默认的icon
src 开发目录
assets 资源目录
views 组件视图目录
router 路由目录
style 样式目录
utils 公共组件目录
以及一些其他根据项目添加的相关目录等
packages.json 项目依赖文件,可以看到相关依赖等
vue.config.js 项目配置文件,可以更改相关配置
3.进入项目目录,执行npm install安装相关依赖库
4.执行yarn serve或者npm install 来运行项目
5.配置一些相关的依赖:
axios:
安装axios:npm install --save axios
将axios配置为全局:在main.js文件中引入axios依赖,并添加Vue.prototype.KaTeX parse error: Expected 'EOF', got '&' at position 17: …xios = axios &̲emsp; echa…echarts = echart
svg-sprite-loader:
安装svg-sprite-loader:npm install --save svg-sprite-loader
配置svg-sprite-loader:在vue.config.js文件中进行如下配置:
chainWebpack: config => {
// alias 配置
config.resolve.alias;
config.resolve.alias.set ('@', resolve ('src')); //设置@为src路径
//配置svg
config.module.rules.delete ('svg');
config.module.rule ('svg').exclude.add (resolve ('src/icons')).end ();
config.module
.rule ('svg-smart')
.test (/\.svg$/)
.include.add (resolve ('src/icons/svg'))
.end ()
.use ('svg-sprite-loader')
.loader ('svg-sprite-loader')
.options ({
symbolId: '[name]',
});
},
ps:使用chainWebpack,修改webpack相关配置,强烈建议先熟悉webpack-chain和vue-cli 源码,以便更好地理解这个选项的配置项
前端项目源码地址:https://github.com/wly13/admin-system
后端采用spring boot来搭建
1.在ide中创建一个JavaWeb项目:打开idea -> file -> new -> project ->spring initialzr -> next,填写maven相关工程配置 -> next,选择web -> next -> finsh。到此一个spring boot的后台项目就初始化成功
2.认识一个后台系统的目录开发结构:
源码目录:src/main/java
controller:前端控制器-主要是用于写前端调用的接口
dao:数据操作层-主要是写各种数据操作方法的接口
domain(bean):实体类-主要是写后端实体类(必须有无参构造函数,以及get和set)
service:数据服务层-service层主要调用dao层的功能实现增删改查
utils:工具类-主要用于存放项目的一些公共类
config:配置信息类
constant:常量接口类
Application.java:工程启动类
资源目录:src/main/resources
i18n:国际化资源
application.yml:项目配置文件-主要用于配置数据库访问,系统编码等各种配置
static:静态资源目录-主要用于存放各种静态资源
templates:模板目录-主要用于存放一些共用的模板
mybatis.xml:mybatis配置文件
mapper:mybatis映射文件-主要是用于写sql语句
测试目录:src/main/test
输出目录:target
pom.xml:maven配置文件-在 pom.xml 中添加所需要的依赖信息,然后在项目根目录执行 mvn install 命令,maven就会自动下载相关依赖jar包到本地仓库
3.各个目录下的一些列子
controller/ListController.java:
package com.example.vue.controller;
import com.example.vue.service.ListService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
import java.util.Map;
@RestController //控制器注解 表示所有数据都以json格式返回
@CrossOrigin //跨域注解
public class ListController {
@Autowired //自动导入某个bean/domain
private ListService listService;
@RequestMapping("api/list") //路由注解 请求该类的url
public List<com.example.vue.domain.List> list() {
return listService.queryAll();
}
@RequestMapping(value = "api/name", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
public List<com.example.vue.domain.List> name( @RequestBody Map<String, String> data ) {
String name = data.get("name");
if (!name.equals("")) {
return listService.queryByName(name);
} else {
return listService.queryAll();
}
}
@RequestMapping(value = "api/addList", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
public int addList( @RequestBody Map<String, String> data ) {
com.example.vue.domain.List list = new com.example.vue.domain.List();
String name = data.get("name");
String sex = Integer.parseInt(data.get("sex")) == 0 ? "女" : "男";
String age = data.get("age");
String birthday = data.get("birth");
String address = data.get("address");
list.setName(name);
list.setSex(sex);
list.setAge(Integer.parseInt(age));
list.setBirthday(birthday);
list.setAddress(address);
return listService.addList(list);
}
@RequestMapping(value = "api/delList",method = RequestMethod.POST,produces = "application/json;charset=UTF-8")
public int delList(@RequestBody Map<String,String> data){
int id = Integer.parseInt(data.get("id"));
System.out.println(id);
int num = listService.delList(id);
System.out.println(num);
return num;
}
// @RequestMapping(value = "api/findAge",method = RequestMethod.POST,produces = "json/application;charset=UTF-8")
// public com.example.vue.domain.List findAge (){
//
// }
domain(bean)/List.java
package com.example.vue.domain;
import java.util.Date;
public class List {
private int id;
private String name;
private String sex;
private int age;
private String birthday;
private String address;
// setter
public void setId( int id ) {
this.id = id;
}
public void setName( String name ) {
this.name = name;
}
public void setSex( String sex ) {
this.sex = sex;
}
public void setAge( int age ) {
this.age = age;
}
public void setBirthday( String birthday ) {
this.birthday = birthday;
}
public void setAddress( String address ) {
this.address = address;
}
// getter
public int getId() {
return id;
}
public String getName() {
return name;
}
public String getSex() {
return sex;
}
public int getAge() {
return age;
}
public String getBirthday() {
return birthday;
}
public String getAddress() {
return address;
}
}
service/ListService.java
package com.example.vue.service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public interface ListService {
@Autowired
List<com.example.vue.domain.List> queryAll();
List<com.example.vue.domain.List> queryByName(String name);
int addList( com.example.vue.domain.List list );
int delList(int id);
}
service/impl/ListServiceImpl.java
package com.example.vue.service.impl;
import com.example.vue.dao.ListDao;
import com.example.vue.service.ListService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service("ListService")
public class ListServiceImpl implements ListService {
@Autowired
private ListDao listDao;
public List<com.example.vue.domain.List> queryAll(){
return listDao.findAll();
}
public List<com.example.vue.domain.List> queryByName( String name){
return listDao.queryName(name);
}
public int addList( com.example.vue.domain.List list ){
return listDao.insertList(list);
}
public int delList(int id){
return listDao.deleteList(id);
}
}
dao/ListDao.java
package com.example.vue.dao;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
import java.util.List;
@Mapper
@Repository
public interface ListDao {
List<com.example.vue.domain.List> findAll();
List<com.example.vue.domain.List> queryName( @Param ("name") String name);
int insertList( com.example.vue.domain.List list );
int deleteList(@Param("id") int id);
}
application.yml:
# DATASOURCE 数据库配置
spring:
datasource:
url: jdbc:mysql://localhost:3306/test?characterEncoding=UTF-8&useSSL=true
username: root
password: 123456
driver-class-name: com.mysql.jdbc.Driver
# MyBatis
mybatis:
typeAliasesPackage: com.example.vue.dao.*.dao
mapperLocations: classpath:/mapper/*.xml
# type-aliases-package: classpath:/com.example.vue.domai ,mn.User
# configLocation: classpath:/mybatis.xml
# typeAliasesPackage:
# 配置Tomcat编码为UTF_8
server:
tomcat:
uri-encoding: utf-8
pom.xml:
<!--配置MySQL工具-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.41</version>
<scope>runtime</scope>
</dependency>
<!--springboot和mybatis集成中间件-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>${mybatis.version}</version>
</dependency>
mapper/ListMapper.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.example.vue.dao.ListDao">
<!-- 查询所有用户-->
<select id="findAll" resultMap="listResult">SELECT * FROM list</select>
<!-- 通过name查询用户-->
<select id="queryName" resultMap="listResult">SELECT * FROM list where name = #{name}</select>
<resultMap id="listResult" type="com.example.vue.domain.List">
<result column="id" property="id"/>
<result column="name" property="name"/>
<result column="sex" property="sex"/>
<result column="age" property="age"/>
<result column="birthday" property="birthday"/>
<result column="address" property="address"/>
</resultMap>
<insert id="insertList" parameterType="List">
insert into list(name,sex,age,birthday,address) values (#{name},#{sex},#{age},#{birthday},#{address})
</insert>
<delete id="deleteList" parameterType="List">
delete from list where id = #{id}
</delete>
</mapper>
以上就是我的一个项目后台的大致目录结构
后台项目源码地址:https://github.com/wly13/vue-admin-background-programe
数据库搭建
数据库采用的是wampserver中的mysql,下载wampserver,安装好后启动,等到图标变绿后,点击phpMyAdmin,然后就可以在网页上搭建数据库,当然你也可以选择通过命令来创建数据库以及相关数据
ps:数据库中的数据存放于后台系统中的database目录下,可以直接放到wampserver中的mysql下的data目录下然后使用,