vue php mysql增删改查表格_GitHub - fyuanfen/CURDTable: Vue+Spring+Mysql实现可以增删改查的表格...

Vue+Spring+Mysql实现可以增删改查的表格

前端使用vue框架实现页面展示，Axios 基于Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用

后台服务器使用Spring构建，简化创建 JPA 数据访问层和跨存储的持久层。

数据库使用mysql

一、构建后台数据库

1. 使用IDEA新建一个JAVA Spring项目,添加Web,JPA,MySql依赖。

2. 实现数据库访问和服务器端口配置

将以下代码添加到resource文件夹的application.properties中

server.port=8000

# 配置mysql

spring.datasource.url=jdbc:mysql://localhost:3306/myapp?useUnicode=true&characterEncoding=utf-8

spring.datasource.username=root

spring.datasource.password=123456

spring.datasource.driver-class-name=com.mysql.jdbc.Driver

# 启动时会根据实体类生成表，当实体类属性变动的时候，表结构也会更新，在初期开发阶段使用此选项。

spring.jpa.hibernate.ddl-auto=update

# hibernate操作的时候在控制台显示真实的sql语句

spring.jpa.show-sql=true

# 让控制器输出的json字符串格式更美观

spring.jackson.serialization.indent_output=true

spring.http.encoding.charset=UTF-8

spring.http.encoding.enabled=true

spring.http.encoding.force=true

3. CORS跨域

不同子域的网页互相访问资源时，需要进行跨与操作。

本实验采取在后台服务器，配置cors，实现跨域请求。

首先，新建一个webconfig类

@Configuration

@EnableWebMvc

public class WebConfig extends WebMvcConfigurerAdapter {

// 允许跨域

@Override

public void addCorsMappings(CorsRegistry registry) {

registry.addMapping("/**")

.allowedOrigins("http://localhost:8080")

.allowCredentials(true)

.allowedMethods("GET", "POST", "PUT", "DELETE")

.maxAge(3600);

}

// 自定义http消息转换

@Bean

public MappingJackson2HttpMessageConverter customJackson2HttpMessageConverter() {

MappingJackson2HttpMessageConverter jsonConverter = new MappingJackson2HttpMessageConverter();

ObjectMapper objectMapper = new ObjectMapper();

objectMapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);

jsonConverter.setObjectMapper(objectMapper);

return jsonConverter;

}

@Override

public void configureMessageConverters(List> converters) {

converters.add(customJackson2HttpMessageConverter());

super.configureMessageConverters(converters);

}

}

这里要注意到，因为使用axios发送http请求，而发送post请求使用的是json格式数据关于axios在node中post的使用。因此还需要添加上面那段http转换代码。

4. 创建一个entity包，新建一个名为User的类，并使用@Entity标注其对应数据库的user表。设置id,username,password属性，分别映射到mysql数据表的字段。

5. 创建数据访问层接口，继承自JpaRepository类，可以完成数据库操作。其中会自动根据方法名称实现相关操作，因此写函数名字的时候一定要注意格式哦～～～

@Repository

public interface UserRepo extends JpaRepository {

User findByUsernameAndPwd(String username, String pwd);

User findByUsername(String username);

List findByUsernameContaining(String username);

}

6. 创建控制层实例，这里可以写一些增删改查相关逻辑。

这里有几点需要注意的，一般的页面映射函数如下：

@RequestMapping(value = "/findbyname")

public List findByName(@RequestParam String username) {

List userlist = userRepo.findByUsernameContaining(username);

return userlist;

}

对于ajax和axios的get操作，参数都可以写成@RequestParam的形式。但是之前说过，axios对于post请求发送的是一个json格式的数据。因此函数形式就变成了下面这样：

@RequestMapping(value = "/add")

public String addUser(@RequestBody User user) {

if (userRepo.findByUsername(user.getUsername()) != null) {

return "已经有这个人了哦～";

} else {

userRepo.save(user);

return "添加成功";

}

}

这里用的是@RequestBody

Vue前台：

1. 关于使用sass语法，可以在webpack.config.js中进行配置，在我的项目中，我是在vue-loader.config.js中进行配置,具体可参考vue-loader文档pre-processors

module.exports = {

loaders: [utils.cssLoaders({

sourceMap: isProduction

? config.build.productionSourceMap

: config.dev.cssSourceMap,

extract: isProduction

}),

{scss: 'vue-style-loader!css-loader!sass-loader' },//

{sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax}' //

}

]

2. 关于es-lint，使用vue-cli构建的项目，默认只会提示而不会修改。因此需要在package.json文件中的lint脚本命令加上--fix，格式如下：

"scripts": {

"lint": "eslint --ext .js,.vue src --fix"

}

这样就可以自动格式化js和.vue代码了。

3.  关于实现可编辑的表格控件，普通做法是使用js直接对表单dom元素进行appendChild和remove操作。而vue可以实现的更优雅一些。

首先在表格组件的data里初始化一个list对象initialItems用来保存获得的后台数据。对于页面的增删查改只需要相应的改变数组内容。但是这样并不能实现动态更新，所以还需要声明一个计算属性items，这样就可以在initialItems改变的时候自动更新显示内容。具体如下：

data () {

return {

initialItems: []

}

},

computed: {

items () {

return this.initialItems

}

},

mounted () {

var that = this

// Make a request for a user with a given ID

axios.get('http://localhost:8000/findall')

.then(function (response) {

that.initialItems = response.data

})

.catch(function (error) {

console.log(error)

})

},

```

这样只需要在增删查改操作时改变initialItems对象，则computed属性就会自动更新，页面元素也会更新。