技术标签: mybatis vue Spring boot
原文链接:https://www.cnblogs.com/wlovet/p/10980579.html
该项目分为前端展示部分和后台服务部分。
前端部分
使用的技术是:NodeJs、Webpack、VueJs
使用的组件库是:IVIEW、easy-table-vue
使用的开发工具是:WebStorm 链接:https://pan.baidu.com/s/1UBmLnRXM-IDcAiw72IESJw 提取码:cuf0
项目地址:https://gitee.com/wlovet/table-project
后台部分
使用的技术是:Maven、SpringBoot、Mybatis
使用的开发工具是:IDeal 链接:https://pan.baidu.com/s/1wFeT50WYvNDNg6OQgs54qw 提取码:64nr
项目地址:https://gitee.com/wlovet/table-server
交互的技术是 :axios
开发模式是:MVVM模式
该案例的目的是教大家从零搭建与编写一个完整的并且可以交互的项目!希望大家喜欢!
第一步:搭建前端服务器与环境
①安装node.js,下载相应版本的node.js,下载地址:https://nodejs.org/en/download/,下载完双击安装,点击下一步直到安装完成
②安装完成后,附件里选择命令提示符(或者在开始的搜索框里输入cmd回车调出命令面板)输入:node -v回车,出现相应版本证明安装成功,
node环境已经安装完成,由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的
国内镜像---cnpm。在命令行中输入:npm install -g cnpm –registry=https://registry.npm.taobao.org回车,大约需要3分钟,
如果报错或没反应,则卸掉node.js重新安装
③安装全局vue-cli脚手架,用于帮助搭建所需的模板框架。输入命令:cnpm install -g vue-cli回车等待完成。
④创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录,假如我们打算把项目新建在e盘下的vue文件夹中则输入下面的命令:
e:回车,然后cd vue,然后输入命令:vue init webpack 项目文件夹名称,回车,运行初始化命令的时候会让用户输入几个基本的选项,
如项目名称,描述,作者等信息,如果不想填直接回车默认就好。(一顿回车+N键就完成了)
⑤安装项目所需的依赖包,首先输入:cd 项目名回车,然后输入:cnpm install回车等待安装,安装完成之后,会在我们的项目目录firstVue
文件夹中多出一个node_modules文件夹,这里边就是我们项目需要的依赖包资源。安装完依赖包之后,就可以运行整个项目了。
⑥测试环境是否搭建成功,在cmd里输入:cnpm run dev回车,项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开
,可以手动输入)。运行成功后,会看到Welcome to Your Vue.js App页面。
第二步:使用WebStorm打开easy-table-vue
结构图如下:
1、引入IVIEW组件和easy-table-vue组件,在当前项目的cmd窗口输入
cnpm install iview --save-dev
cnpm install vue-easytable --save-dev
2、打开main.js文件,使用这些组件
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//引入IVIEW组件
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
//引入vue-easytable
import 'vue-easytable/libs/themes-base/index.css'
import {VTable,VPagination} from 'vue-easytable'
Vue.component(VTable.name, VTable)
Vue.component(VPagination.name, VPagination)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
3、在src/components文件夹下新建文件TableMain.vue文件,添加代码如下:
<template>
<div class="layout">
<Layout>
<Header>
<Menu mode="horizontal" theme="dark" active-name="1">
<div class="layout-logo">IVIEW布局</div>
<div class="layout-nav">
<MenuItem name="1">
<Icon type="ios-navigate"></Icon>
Item 1
</MenuItem>
<MenuItem name="2">
<Icon type="ios-keypad"></Icon>
Item 2
</MenuItem>
<MenuItem name="3">
<Icon type="ios-analytics"></Icon>
Item 3
</MenuItem>
<MenuItem name="4">
<Icon type="ios-paper"></Icon>
Item 4
</MenuItem>
</div>
</Menu>
</Header>
<Content :style="{padding: '0 50px'}">
<Breadcrumb :style="{margin: '20px 0'}">
<BreadcrumbItem>Home</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem>Layout</BreadcrumbItem>
</Breadcrumb>
<Card>
<div style="min-height: 200px;">
<v-table
is-horizontal-resize
style="width:100%"
:columns="columns"
:table-data="tableData"
row-hover-color="#eee"
row-click-color="#edf7ff"
></v-table>
</div>
</Card>
</Content>
<Footer class="layout-footer-center"> © 作者:不若为止</Footer>
</Layout>
</div>
</template>
<script>
export default {
name: "table-main",
data() {
return {
tableData: [
{"name":"赵伟","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
{"name":"李伟","tel":"182*****1538","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
{"name":"孙伟","tel":"161*****0097","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
{"name":"周伟","tel":"197*****1123","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
{"name":"吴伟","tel":"183*****6678","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"},
{"name":"赵伟","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
{"name":"李伟","tel":"182*****1538","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
{"name":"孙伟","tel":"161*****0097","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
{"name":"周伟","tel":"197*****1123","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
{"name":"吴伟","tel":"183*****6678","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"}
],
columns: [
{field: 'name', title: '姓名', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
{field: 'tel', title: '手机号码', width: 150, titleAlign: 'center', columnAlign: 'center',isResize:true},
{field: 'hobby', title: '爱好', width: 150, titleAlign: 'center', columnAlign: 'center',isResize:true},
{field: 'address', title: '地址', width: 280, titleAlign: 'center', columnAlign: 'left',isResize:true}
]
}
}
}
</script>
<style scoped>
.layout{
border: 1px solid #d7dde4;
background: #f5f7f9;
position: relative;
border-radius: 4px;
overflow: hidden;
height: 100%;
}
.layout-logo{
width: 100px;
height: 30px;
background: #5b6270;
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 20px;
font-weight: bold;
text-align: center;
color: #49ffcc;
}
.layout-nav{
width: 420px;
margin: 0 auto;
margin-right: 20px;
}
.layout-footer-center{
text-align: center;
}
</style>
4、修改src/router文件夹下的index.js,代码如下:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import TableMain from '@/components/TableMain'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Table',
component: TableMain
}
]
})
此时页面展示如下:
现在界面的数据都是定死的,还不能做到与后台交互。
第三步:执行下面的SQL脚本,将数据导入数据库
CREATE TABLE persons
(id integer,
create_datetime datetime,
email varchar(255),
phone varchar(255),
sex varchar(255),
username varchar(255),
zone blob,
primary key (id));
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001111, 'male', 'gubaoer', 'HongKou District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001112, 'male', 'baoer.gu', 'JingAn District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001113, 'female', 'yoyo.wu', 'JingAn District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001114, 'female', 'stacy.gao', 'MinHang District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001115, 'female', 'yomiko.zhu', 'PuDong District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001116, 'male', 'hong.zhu', 'YangPu District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001117, 'male', 'leon.lai', 'JinShan District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001118, 'male', 'mark.lei', 'HuangPu District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001119, 'male', 'wen.liu', 'ChongMing District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001120, 'female', 'cai.lu', 'BaoShan District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001121, 'male', 'alex.li', 'ChangNing District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001122, 'female', 'sofia.xu', 'ZhaBei District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001123, 'female', 'cora.zhang', 'XuHui District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001124, 'female', 'tom.gao', 'HuangPu District');
第四步:使用IDeal创建一个SpringBoot项目
此处教大家一个快速创建SpringBoot项目的办法,这样可以省去编写pom.xml的步骤,记得连上网络
1、点击New Project,选择Spring Initializr,点击
2、输入包名和项目名,点击next
3、这里的操作就是在pom.xml配置你所需要的环境,配置好之后,点击next,然后Finnish就创建好了一个项目啦
使用Eclipse或者MyEclipse的小伙伴,可以创建一个Maven项目,把我的pom.xml文件的内容复制一下:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.5.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.wzhi</groupId>
<artifactId>tableserver</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>tableserver</name>
<description>实现数据表格的前后台交互</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.0.1</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
第五步:编写后台交互的业务代码
完整的项目结构图如下:
1、修改application.yml,添加配置内容如下:
mybatis:
config-location: classpath:mybatis/mybatis.cfg.xml
mapper-locations: classpath:mybatis/mapper/*.xml
type-aliases-package: com.wzhi.tableserver.pojo
server:
port: 8888
spring:
application:
name: table-server
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
password: 123456
url: jdbc:mysql://XXX.XXX.XXX.XXX:3306/test?characterEncoding=utf8&useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
username: root
2、修改TableserverApplication.java,代码如下:
/**
* @author 不若为止
* @version 1.0
* @class PersonService
* @package com.wzhi.tableserver
* @desc
* @MapperScan 的作用是扫描到文件夹下的@Mapper注解
* @Slf4j 是日志打印注解
* @SpringBootApplication SpringBoot的启动注解
* @copyright weizhi
* @date 2018/09/04
*/
@SpringBootApplication
@MapperScan(basePackages = "com.wzhi.tableserver.dao")
@Slf4j
public class TableserverApplication {
public static void main(String[] args) {
ConfigurableApplicationContext context =SpringApplication.run(TableserverApplication.class, args);
log.info("该服务的名称是:{}",context.getEnvironment().getProperty("spring.application.name"));
log.info("该服务的启动端口是:{}",context.getEnvironment().getProperty("server.port"));
}
}
3、在config目录下新建CorsConfig.java,解决axios的跨域问题,代码如下:
package com.wzhi.tableserver.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
* @author 不若为止
* @version 1.0
* @class CorsConfig
* @package com.wzhi.tableserver.config
* @desc 因为Vue使用的是axios进行后台交互,所以需要配置一个过滤
* @copyright weizhi
* @date 2018/09/04
*/
@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig(){
CorsConfiguration corsConfiguration =new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter(){
//System.out.println("进入跨域处理");
UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**",buildConfig());
return new CorsFilter(source);
}
}
4、新建Person.java实体类,代码如下:
package com.wzhi.tableserver.pojo;
import lombok.Data;
import lombok.experimental.Accessors;
/**
* @author 不若为止
* @version 1.0
* @class Person
* @package com.wzhi.tableserver.pojo
* @desc 个人信息实体类
* @copyright weizhi
* @date 2018/09/04
*/
@Data
@Accessors(chain = true)
public class Person {
private Integer id;
private String userName;
private String zone;
private String email;
private String sex;
private String phone;
private String createTime;
}
5、新建PersonMapper.java文件,代码如下:
package com.wzhi.tableserver.dao;
import com.wzhi.tableserver.pojo.Person;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
/**
* @author 不若为止
* @version 1.0
* @class PersonMapper
* @package com.wzhi.tableserver.dao
* @desc 个人信息Mapper,此处的Mapper注解会被启动类的@MapperScan扫描到
* @copyright weizhi
* @date 2018/09/04
*/
@Mapper
public interface PersonMapper {
/**
* @desc 查询所有的用户
* @return
*/
List<Person> findAll();
}
6、新建mybatis.cfg.xml和PersonMapping.xml文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<!-- 全局参数 -->
<configuration>
<settings>
<!-- 使全局的映射器启用或禁用缓存。 -->
<setting name="cacheEnabled" value="true" />
<!-- 全局启用或禁用延迟加载。当禁用时,所有关联对象都会即时加载。 -->
<setting name="lazyLoadingEnabled" value="true" />
<!-- 当启用时,有延迟加载属性的对象在被调用时将会完全加载任意属性。否则,每种属性将会按需要加载。 -->
<setting name="aggressiveLazyLoading" value="true" />
<!-- 是否允许单条sql 返回多个数据集 (取决于驱动的兼容性) default:true -->
<setting name="multipleResultSetsEnabled" value="true" />
<!-- 是否可以使用列的别名 (取决于驱动的兼容性) default:true -->
<setting name="useColumnLabel" value="true" />
<!-- 允许JDBC 生成主键。需要驱动器支持。如果设为了true,这个设置将强制使用被生成的主键,有一些驱动器不兼容不过仍然可以执行。 default:false -->
<setting name="useGeneratedKeys" value="true" />
<!-- 指定 MyBatis 如何自动映射 数据基表的列 NONE:不隐射 PARTIAL:部分 FULL:全部 -->
<setting name="autoMappingBehavior" value="PARTIAL" />
<!-- 这是默认的执行类型 (SIMPLE: 简单; REUSE: 执行器可能重复使用prepared statements语句;BATCH:
执行器可以重复执行语句和批量更新) -->
<setting name="defaultExecutorType" value="SIMPLE" />
<!-- 使用驼峰命名法转换字段。 -->
<setting name="mapUnderscoreToCamelCase" value="true" />
<!-- 设置本地缓存范围 session:就会有数据的共享 statement:语句范围 (这样就不会有数据的共享 ) defalut:session -->
<setting name="localCacheScope" value="SESSION" />
<!-- 设置但JDBC类型为空时,某些驱动程序 要指定值,default:OTHER,插入空值时不需要指定类型 -->
<setting name="jdbcTypeForNull" value="NULL" />
</settings>
</configuration>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org/DTD Mapper 3.0" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wzhi.tableserver.dao.PersonMapper">
<resultMap type="com.wzhi.tableserver.pojo.Person" id="person">
<result column="id" jdbcType="INTEGER" property="id"/>
<result column="create_datetime" jdbcType="VARCHAR" property="createTime"/>
<result column="email" jdbcType="VARCHAR" property="email"/>
<result column="phone" jdbcType="VARCHAR" property="phone"/>
<result column="sex" jdbcType="VARCHAR" property="sex"/>
<result column="username" jdbcType="INTEGER" property="username"/>
<result column="zone" jdbcType="VARCHAR" property="zone"/>
</resultMap>
<sql id="personColnum">
id,create_datetime,email,phone,sex,username,zone
</sql>
<select id="findAll" resultMap="person">
SELECT <include refid="personColnum"/>
FROM persons
</select>
</mapper>
7、新建PersonService.java和PersonServiceImpl.java
package com.wzhi.tableserver.service;
import com.wzhi.tableserver.pojo.Person;
import java.util.List;
/**
* @author 不若为止
* @version 1.0
* @class PersonService
* @package com.wzhi.tableserver.service
* @desc 个人信息Service
* @copyright weizhi
* @date 2018/09/04
*/
public interface PersonService {
/**
* @desc 查询所有的用户
* @return
*/
List<Person> findAll();
}
package com.wzhi.tableserver.service.impl;
import com.wzhi.tableserver.dao.PersonMapper;
import com.wzhi.tableserver.pojo.Person;
import com.wzhi.tableserver.service.PersonService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Slf4j
@Service
public class PersonServiceImpl implements PersonService {
@Autowired
private PersonMapper mapper;
@Override
public List<Person> findAll() {
return mapper.findAll();
}
}
8、新建PersonController.java,代码如下:
package com.wzhi.tableserver.controller;
import com.wzhi.tableserver.pojo.Person;
import com.wzhi.tableserver.service.PersonService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
/**
* @author 不若为止
* @version 1.0
* @class PersonController
* @package com.wzhi.tableserver.controller
* @desc 个人信息交互
* @copyright weizhi
* @date 2018/09/04
*/
@RestController
@Slf4j
public class PersonController {
@Autowired
private PersonService service;
@GetMapping(value = "findAll")
public List<Person> findAll(){
log.info("查询所有的角色信息");
return service.findAll();
}
}
第六步:实现前后台的数据交互
1、在前端项目中引入axios,执行命令cnpm install axios --save-dev,修改在main.js为:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//引入IVIEW组件
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
//引入vue-easytable
import 'vue-easytable/libs/themes-base/index.css'
import {VTable,VPagination} from 'vue-easytable'
Vue.component(VTable.name, VTable)
Vue.component(VPagination.name, VPagination)
//引入axios
import axios from 'axios'
Vue.prototype.$ajax = axios
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
2、修改TableMain.vue文件,修改数据从后台服务获取,代码如下:
<template>
<div class="layout">
<Layout>
<Header>
<Menu mode="horizontal" theme="dark" active-name="1">
<div class="layout-logo">IVIEW布局</div>
<div class="layout-nav">
<MenuItem name="1">
<Icon type="ios-navigate"></Icon>
Item 1
</MenuItem>
<MenuItem name="2">
<Icon type="ios-keypad"></Icon>
Item 2
</MenuItem>
<MenuItem name="3">
<Icon type="ios-analytics"></Icon>
Item 3
</MenuItem>
<MenuItem name="4">
<Icon type="ios-paper"></Icon>
Item 4
</MenuItem>
</div>
</Menu>
</Header>
<Content :style="{padding: '0 50px'}">
<Breadcrumb :style="{margin: '20px 0'}">
<BreadcrumbItem>Home</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem>Layout</BreadcrumbItem>
</Breadcrumb>
<Card>
<div style="min-height: 200px;">
<v-table
is-horizontal-resize
style="width:100%"
:columns="columns"
:table-data="tableData"
row-hover-color="#eee"
row-click-color="#edf7ff"
></v-table>
</div>
</Card>
</Content>
<Footer class="layout-footer-center"> © 作者:不若为止</Footer>
</Layout>
</div>
</template>
<script>
export default {
name: "table-main",
data() {
return {
tableData: [],
columns: [
{field: 'userName', title: '姓名', width: 80, titleAlign: 'center', columnAlign: 'center', isResize: true},
{field: 'phone', title: '手机号码', width: 150, titleAlign: 'center', columnAlign: 'center', isResize: true},
{field: 'sex', title: '性别', width: 150, titleAlign: 'center', columnAlign: 'center', isResize: true},
{field: 'email', title: '电子邮箱', width: 280, titleAlign: 'center', columnAlign: 'left', isResize: true},
{field: 'createTime', title: 'createTime', width: 150, titleAlign: 'center', columnAlign: 'center', isResize: true},
{field: 'zone', title: 'zone', width: 150, titleAlign: 'center', columnAlign: 'center', isResize: true},
]
}
},
created() {
//在created函数中使用axios的get请求向后台获取用户信息数据
this.$ajax('http://localhost:8888/findAll').then(res => {
this.tableData = res.data
}).catch(function (error) {
console.log(error);
});
}
}
</script>
<style scoped>
.layout {
border: 1px solid #d7dde4;
background: #f5f7f9;
position: relative;
border-radius: 4px;
overflow: hidden;
height: 100%;
}
.layout-logo {
width: 100px;
height: 30px;
background: #5b6270;
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 20px;
font-weight: bold;
text-align: center;
color: #49ffcc;
}
.layout-nav {
width: 420px;
margin: 0 auto;
margin-right: 20px;
}
.layout-footer-center {
text-align: center;
}
</style>
3、启动TableServerApplication,刷新界面,从后台查询到数据如下:
编辑过程中会遇的问题
1、使用WebStorm打开Vue项目没有这样的图表
解决办法:点击File->Settings->Plugins,搜索Vue,下载点击Apply重启即可
我搭建的整个项目已上传至我的资源
文章浏览阅读101次。4.class可以有⽆参的构造函数,struct不可以,必须是有参的构造函数,⽽且在有参的构造函数必须初始。2.Struct适⽤于作为经常使⽤的⼀些数据组合成的新类型,表示诸如点、矩形等主要⽤来存储数据的轻量。1.Class⽐较适合⼤的和复杂的数据,表现抽象和多级别的对象层次时。2.class允许继承、被继承,struct不允许,只能继承接⼝。3.Struct有性能优势,Class有⾯向对象的扩展优势。3.class可以初始化变量,struct不可以。1.class是引⽤类型,struct是值类型。
文章浏览阅读586次。想实现的功能是点击顶部按钮之后按关键字进行搜索,已经可以从服务器收到反馈的json信息,但从json信息的解析开始就会闪退,加载listview也不知道行不行public abstract class loadlistview{public ListView plv;public String js;public int listlength;public int listvisit;public..._rton转json为什么会闪退
文章浏览阅读219次。如何使用wordnet词典,得到英文句子的同义句_get_synonyms wordnet
文章浏览阅读521次。系统项目报表导出 导出任务队列表 + 定时扫描 + 多线程_积木报表 多线程
文章浏览阅读1.1k次,点赞9次,收藏9次。使用AJAX技术的好处之一是它能够提供更好的用户体验,因为它允许在不重新加载整个页面的情况下更新网页的某一部分。另外,AJAX还使得开发人员能够创建更复杂、更动态的Web应用程序,因为它们可以在后台与服务器进行通信,而不需要打断用户的浏览体验。在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种常用的技术,用于在不重新加载整个页面的情况下,从服务器获取数据并更新网页的某一部分。使用AJAX,你可以创建异步请求,从而提供更快的响应和更好的用户体验。_ajax 获取http数据
文章浏览阅读2.8k次。登录退出、修改密码、关机重启_字符终端
文章浏览阅读3.8k次,点赞3次,收藏51次。前段时间看到一位发烧友制作的超声波雷达扫描神器,用到了Arduino和Processing,可惜啊,我不会Processing更看不懂人家的程序,咋办呢?嘿嘿,所以我就换了个思路解决,因为我会一点Python啊,那就动手吧!在做这个案例之前先要搞明白一个问题:怎么将Arduino通过超声波检测到的距离反馈到Python端?这个嘛,我首先想到了串行通信接口。没错!就是串口。只要Arduino将数据发送给COM口,然后Python能从COM口读取到这个数据就可以啦!我先写了一个测试程序试了一下,OK!搞定_超声波扫描建模 python库
文章浏览阅读4.2k次。端—端加密指信息由发送端自动加密,并且由TCP/IP进行数据包封装,然后作为不可阅读和不可识别的数据穿过互联网,当这些信息到达目的地,将被自动重组、解密,而成为可读的数据。不可逆加密算法的特征是加密过程中不需要使用密钥,输入明文后由系统直接经过加密算法处理成密文,这种加密后的数据是无法被解密的,只有重新输入明文,并再次经过同样不可逆的加密算法处理,得到相同的加密密文并被系统重新识别后,才能真正解密。2.使用时,加密者查找明文字母表中需要加密的消息中的每一个字母所在位置,并且写下密文字母表中对应的字母。_凯撒加密
文章浏览阅读5.7k次。CIP报文解析常用到的几个字段:普通类型服务类型:[0x00], CIP对象:[0x02 Message Router], ioi segments:[XX]PCCC(带cmd和func)服务类型:[0x00], CIP对象:[0x02 Message Router], cmd:[0x101], fnc:[0x101]..._cip协议embedded_service_error
文章浏览阅读2.4k次,点赞9次,收藏13次。有时候我们在MFC项目开发过程中,需要用到一些微软已经提供的功能,如VC++使用EXCEL功能,这时候我们就能直接通过VS2019到如EXCEL.EXE方式,生成对应的OLE头文件,然后直接使用功能,那么,我们上篇文章中介绍了vs2017及以前的版本如何来添加。但由于微软某些方面考虑,这种方式已被放弃。从上图中可以看出,这一功能,在从vs2017版本15.9开始,后续版本已经删除了此功能。那么我们如果仍需要此功能,我们如何在新版本中添加呢。_vs添加mfc库
文章浏览阅读785次。用ac3编码,执行编码函数时报错入如下:[ac3 @ 0x7fed7800f200] frame_size (1536) was not respected for anon-last frame (avcodec_encode_audio2)用ac3编码时每次送入编码器的音频采样数应该是1536个采样,不然就会报上述错误。这个数字并非刻意固定,而是跟ac3内部的编码算法原理相关。全网找不到,国内音视频之路还有很长的路,音视频人一起加油吧~......_frame_size (1024) was not respected for a non-last frame
文章浏览阅读230次,点赞2次,收藏2次。创建Android应用程序一个项目里面可以有很多模块,而每一个模块就对应了一个应用程序。项目结构介绍_在安卓移动应用开发中要在活动类文件中声迷你一个复选框变量