一个vue管理系统的初步搭建总结

最新推荐文章于 2023-11-03 10:45:34 发布

weixin_30273763

最新推荐文章于 2023-11-03 10:45:34 发布

阅读量107

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Buries/p/11288529.html

版权

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.$axios = axios
echatrs:
安装echarts： npm install --save echarts
将echarts配置为全局：在main.js文件中引入echarts依赖并添加Vue.prototype.$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

在spring boot中，注解很重要，附录常用的注解

@SpringBootApplication：申明让spring boot自动给程序进行必要的配置，这个配置等同于：

@Configuration ，@EnableAutoConfiguration 和 @ComponentScan 三个配置。

@ResponseBody：表示该方法的返回结果直接写入HTTP response body中，一般在异步获取数据时使用，用于构建RESTful的api。在使用@RequestMapping后，返回值通常解析为跳转路径，加上@esponsebody后返回结果不会被解析为跳转路径，而是直接写入HTTP response body中。比如异步获取json数据，加上@Responsebody后，会直接返回json数据。该注解一般会配合@RequestMapping一起使用。示例代码：

@Controller：用于定义控制器类，在spring项目中由控制器负责将用户发来的URL请求转发到对应的服务接口（service层），一般这个注解在类中，通常方法需要配合注解@RequestMapping。示例代码：

@RestController：用于标注控制层组件(如struts中的action)，@ResponseBody和@Controller的合集。示例代码：

@RequestMapping：提供路由信息，负责URL到Controller中的具体函数的映射。

@EnableAutoConfiguration：SpringBoot自动配置（auto-configuration）：尝试根据你添加的jar依赖自动配置你的Spring应用。例如，如果你的classpath下存在HSQLDB，并且你没有手动配置任何数据库连接beans，那么我们将自动配置一个内存型（in-memory）数据库”。你可以将@EnableAutoConfiguration或者@SpringBootApplication注解添加到一个@Configuration类上来选择自动配置。如果发现应用了你不想要的特定自动配置类，你可以使用@EnableAutoConfiguration注解的排除属性来禁用它们。

@ComponentScan：表示将该类自动发现扫描组件。个人理解相当于，如果扫描到有@Component、@Controller、@Service等这些注解的类，并注册为Bean，可以自动收集所有的Spring组件，包括@Configuration类。我们经常使用@ComponentScan注解搜索beans，并结合@Autowired注解导入。可以自动收集所有的Spring组件，包括@Configuration类。我们经常使用@ComponentScan注解搜索beans，并结合@Autowired注解导入。如果没有配置的话，Spring Boot会扫描启动类所在包下以及子包下的使用了@Service,@Repository等注解的类。

@Configuration：相当于传统的xml配置文件，如果有些第三方库需要用到xml文件，建议仍然通过@Configuration类作为项目的配置主类——可以使用@ImportResource注解加载xml配置文件。

@Import：用来导入其他配置类。

@ImportResource：用来加载xml配置文件。

@Autowired：自动导入依赖的bean

@Service：一般用于修饰service层的组件

@Repository：使用@Repository注解可以确保DAO或者repositories提供异常转译，这个注解修饰的DAO或者repositories类会被ComponetScan发现并配置，同时也不需要为它们提供XML配置项。

@Bean：用@Bean标注方法等价于XML中配置的bean。

@Value：注入Spring boot application.properties配置的属性的值。示例代码：

@Inject：等价于默认的@Autowired，只是没有required属性；

@Component：泛指组件，当组件不好归类的时候，我们可以使用这个注解进行标注。

@Bean:相当于XML中的,放在方法的上面，而不是类，意思是产生一个bean,并交给spring管理。

@AutoWired：自动导入依赖的bean。byType方式。把配置好的Bean拿来用，完成属性、方法的组装，它可以对类成员变量、方法及构造函数进行标注，完成自动装配的工作。当加上（required=false）时，就算找不到bean也不报错。

@Qualifier：当有多个同一类型的Bean时，可以用@Qualifier(“name”)来指定。与@Autowired配合使用。@Qualifier限定描述符除了能根据名字进行注入，但能进行更细粒度的控制如何选择候选者，具体使用方式如下：

@Resource(name=”name”,type=”type”)：没有括号内内容的话，默认byName。与@Autowired干类似的事。

数据库搭建

数据库采用的是wampserver中的mysql，下载wampserver，安装好后启动，等到图标变绿后，点击phpMyAdmin，然后就可以在网页上搭建数据库，当然你也可以选择通过命令来创建数据库以及相关数据 ps：数据库中的数据存放于后台系统中的database目录下，可以直接放到wampserver中的mysql下的data目录下然后使用，

转载于:https://www.cnblogs.com/Buries/p/11288529.html

weixin_30273763

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个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.使用指...
复制链接

扫一扫