安装命令

1
2
3
4
5
6
7
#安装ui组件库
npm i element-ui -S
#安装vue/cli
npm install -g @vue/cli
#创建vue项目，空格选择
vue create vue

代码

1
2
3
4
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

vue地址

https://cli.vuejs.org/zh/

ElementUI地址

https://element.eleme.cn/#/zh-CN/component/quickstart

图标库

https://www.iconfont.cn/

初始化css

1
2
3
4
5
6
7
8
9
10
body{
    margin: 0;
    padding: 0;
    background-color: #EEEEEE;

}
*{
    /*定义盒子模型*/
    box-sizing: border-box;
}

导入全局样式

1
2
3
#@表示src目录
import '@/assets/global.css'

css

1
2
3
min-height: calc(100vh - 62px)  计算属性最小高度
overflow: hidden;               隐藏

主体框架

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<template>
  <div id="app">
<!--    头部区域-->
    <div style="height: 60px;line-height: 60px;background-color: white;margin-bottom: 2px">
        <img src="@/assets/图书馆.png" style="width: 40px;height: 40px;position: relative;top: 4px;left: 20px" >
        <span style="margin-left: 30px;font-size: 24px">图书管理系统</span>
    </div>
<!--      侧边栏和主体-->
    <div>
<!--        侧边栏 overflow: hidden 超出的部分隐藏 -->
        <div style="display: flex;min-height: calc(100vh - 62px);overflow: hidden;margin-right: 2px;background-color: white">
            <el-menu :default-active="$route.path" router class="el-menu-demo" >
                <el-menu-item index="/">
                    <i class="el-icon-house"></i>
                    <span>首页</span>
                </el-menu-item>
                <el-submenu >
                    <template slot="title">
                        <i class="el-icon-collection"></i>
                        <span>关于页面</span>
                    </template>
                    <el-menu-item index="/about">
                        <i class="el-icon-chat-line-round"></i>
                        <span>关于页面</span>
                    </el-menu-item>
                </el-submenu>
                </el-menu>
            <div style="background-color: white;flex: 1" >
                <router-view/>
            </div>
        </div>
<!--        主体数据-->

    </div>
  </div>
</template>


搜索

1
2
3
4
5
<div style="margin-bottom: 20px;margin-top: 20px">
      <el-input style="width: 240px " placeholder="请输入名称"></el-input>
      <el-input style="width: 240px;margin-left: 5px " placeholder="请输入联系方式"></el-input>
      <el-button type="primary" style="width: 120px;margin-left: 5px " icon="el-icon-search">搜索</el-button>
    </div>

springboot地址

1
2
3
4
5
#国内
https://start.aliyun.com/
#国外
https://start.spring.io/

application.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
server:
  port: 8089

mybatis:
  mapper-locations: classpath:mappers/*xml
  type-aliases-package: com.example.demo.mybatis.entity


# 数据库配置
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root   #你本地的数据库用户名
    password: 123456 #你本地的数据库密码
    url: jdbc:mysql://localhost:3306/library-management?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false&serverTimezone=GMT%2b8&allowPublicKeyRetrieval=true
  servlet:
    multipart:
      max-file-size: 100MB
      max-request-size: 100MB

enrity(放关于数据库相关的东西)

user

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package com.example.demo.entity;

import lombok.Data;

@Data
public class User {
    private Integer id;
    private String name;
    private String username;
    private Integer age;
    private String phone;
    private String address;
    private String sex;
}

mapper接口（存放数据库相关的api）

service（业务处理层）

编写IUserService接口

1
2
3
4
5
6
7
8
9
package com.example.demo.service;

import com.example.demo.entity.User;

import java.util.List;

public interface IUserService {
    List<User> listUser();
}

新建impl包实现类UserService

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package com.example.demo.service.impl;

import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import com.example.demo.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;

import java.util.List;

public class UserService  implements IUserService {
    @Autowired
    UserMapper userMapper;      #自动装配
    @Override
    public List<User> listUser() {
        return userMapper.listUser();
    }
}

controller（返回给前端的数据）

跨域解决方案

1
在后台接口controller下面加一个@CrossOrigin注解

#### 安装命令

1
2
3
4
5
6
7
#安装ui组件库
npm i element-ui -S
#安装vue/cli
npm install -g @vue/cli
#创建vue项目，空格选择
vue create vue

代码

1
2
3
4
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

vue地址

https://cli.vuejs.org/zh/

ElementUI地址

https://element.eleme.cn/#/zh-CN/component/quickstart

图标库

https://www.iconfont.cn/

初始化css

1
2
3
4
5
6
7
8
9
10
body{
    margin: 0;
    padding: 0;
    background-color: #EEEEEE;

}
*{
    /*定义盒子模型*/
    box-sizing: border-box;
}

导入全局样式

1
2
3
#@表示src目录
import '@/assets/global.css'

css

1
2
3
min-height: calc(100vh - 62px)  计算属性最小高度
overflow: hidden;               隐藏

主体框架

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<template>
  <div id="app">
<!--    头部区域-->
    <div style="height: 60px;line-height: 60px;background-color: white;margin-bottom: 2px">
        <img src="@/assets/图书馆.png" style="width: 40px;height: 40px;position: relative;top: 4px;left: 20px" >
        <span style="margin-left: 30px;font-size: 24px">图书管理系统</span>
    </div>
<!--      侧边栏和主体-->
    <div>
<!--        侧边栏 overflow: hidden 超出的部分隐藏 -->
        <div style="display: flex;min-height: calc(100vh - 62px);overflow: hidden;margin-right: 2px;background-color: white">
            <el-menu :default-active="$route.path" router class="el-menu-demo" >
                <el-menu-item index="/">
                    <i class="el-icon-house"></i>
                    <span>首页</span>
                </el-menu-item>
                <el-submenu >
                    <template slot="title">
                        <i class="el-icon-collection"></i>
                        <span>关于页面</span>
                    </template>
                    <el-menu-item index="/about">
                        <i class="el-icon-chat-line-round"></i>
                        <span>关于页面</span>
                    </el-menu-item>
                </el-submenu>
                </el-menu>
            <div style="background-color: white;flex: 1" >
                <router-view/>
            </div>
        </div>
<!--        主体数据-->

    </div>
  </div>
</template>


搜索

1
2
3
4
5
<div style="margin-bottom: 20px;margin-top: 20px">
      <el-input style="width: 240px " placeholder="请输入名称"></el-input>
      <el-input style="width: 240px;margin-left: 5px " placeholder="请输入联系方式"></el-input>
      <el-button type="primary" style="width: 120px;margin-left: 5px " icon="el-icon-search">搜索</el-button>
    </div>

springboot地址

1
2
3
4
5
#国内
https://start.aliyun.com/
#国外
https://start.spring.io/

application.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
server:
  port: 8089

mybatis:
  mapper-locations: classpath:mappers/*xml
  type-aliases-package: com.example.demo.mybatis.entity


# 数据库配置
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root   #你本地的数据库用户名
    password: 123456 #你本地的数据库密码
    url: jdbc:mysql://localhost:3306/library-management?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false&serverTimezone=GMT%2b8&allowPublicKeyRetrieval=true
  servlet:
    multipart:
      max-file-size: 100MB
      max-request-size: 100MB

enrity(放关于数据库相关的东西)

user

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package com.example.demo.entity;

import lombok.Data;

@Data
public class User {
    private Integer id;
    private String name;
    private String username;
    private Integer age;
    private String phone;
    private String address;
    private String sex;
}

mapper接口（存放数据库相关的api）

service（业务处理层）

编写IUserService接口

1
2
3
4
5
6
7
8
9
package com.example.demo.service;

import com.example.demo.entity.User;

import java.util.List;

public interface IUserService {
    List<User> listUser();
}

新建impl包实现类UserService

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package com.example.demo.service.impl;

import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import com.example.demo.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;

import java.util.List;

public class UserService  implements IUserService {
    @Autowired
    UserMapper userMapper;      #自动装配
    @Override
    public List<User> listUser() {
        return userMapper.listUser();
    }
}

controller（返回给前端的数据）

跨域解决方案

1
在后台接口controller下面加一个@CrossOrigin注解