深圳网站建设方维网络,企业网站建设需要哪些步骤,友情连接出售,推广的网站有哪些第一步编写前端页面#xff0c;第二步搭建后端环境#xff0c;现在开始第三步#xff0c;继续完善前端功能完善“添加”按钮功能Ajax异步请求安装在前端项目安装ajax。在Terminal输入#xff1a;npm i axios -S点击“添加”按钮#xff0c;弹出Dialog对话框设置对话框里面…第一步编写前端页面第二步搭建后端环境现在开始第三步继续完善前端功能完善“添加”按钮功能Ajax异步请求安装在前端项目安装ajax。在Terminal输入npm i axios -S点击“添加”按钮弹出Dialog对话框设置对话框里面的内容——表单对话框选用Dialog嵌入表单menu二者一起构成了新增对话框注意v-model:model变量方法的设置及格式 !--添加对话框--el-dialog text v-modeldialogVisible width30% title提示!--添加表单--el-form :modelfurn label-width120px stylewidth:80%el-form-item label商品名el-input v-modelfurn.name //el-form-itemel-form-item label制造商el-input v-modelfurn.maker //el-form-itemel-form-item label价格el-input v-modelfurn.price //el-form-itemel-form-item label销量el-input v-modelfurn.sales //el-form-itemel-form-item label库存el-input v-modelfurn.stock //el-form-item/el-formtemplate #footerspan classdialog-footerel-button clickdialogVisible false取消/el-buttonel-button typeprimary clickdialogVisible false确定/el-button/span/template/el-dialog创建axios request命名成了myRequest便于区别request// 引入axios
import axios from axios;
// 通过axios创建对象-request,用于发送请求到后端
const myRequestaxios.create({timeout: 5000
})
// request拦截器处理
myRequest.interceptors.request.use(config{config.headers[Content-Type]application/json;charsetutf-8return config
},error {return Promise.reject(error)
})
export default myRequest跨域异常AxiosError/跨源修改vue.config.jsmodule.exports {devServer: {port: 10000,proxy:{ //设置代理必填/api:{ //设置拦截器格式/名字target:http://localhost:8080 ,//目标地址就是/api要替换的地址changeOrigin:true, //设置是否同源设为是。实现跨域pathRewrite:{ //路径重写/api: //选择忽略拦截器里面的单词}}}}
}HomeView.vue修改ajax的访问url:localhost:8080/save改为。前后端即可通信myRequest.post(/api/save,this.furn).then(显示所有家居信息思路分析完成后台代码从mapper-service-controller,并使用Postman对代码进行测试因为使用搭建的环境mybatis-plus已经完成了mapper\service层直接完成controller即可 RequestMapping(/list)public Result listFurns(){ListFurn furns furnService.list();return Result.success(furns);}完成前台代码使用axios发送http请求返回所有家居数据将数据绑定显示 methods:{list(){myRequest.get(/api/list).then(res{console.log(res,res);this.tableDatares.data.data;})},调用显示数据的方法。VUE生命周期 created(){this.list()},增加 处理响应后的结果主要是练习这种处理方式。这儿的用处不大实际产生的作用就是把response.data的数据层级拿出来了一层,达成下面这个效果this.tableDatares.data.datathis.tableDatares.data;前端HomeView.vue// response拦截器返回结果处理
myRequest.interceptors.response.use(response{let resresponse.dataif(response.config.responseTypeblob){return res;}if(typeof resstring){resres? JSON.parse(res):res}return res;
})在save()方法增加list()完成刷新之前在list()方法里面加入了list()导致循环致使view页面不能显示list()方法加在res{}括号里面在页面能立马看到更新效果。原因是Ajax的异步机制Ajax有通讯运行慢{}而括号外的代码在本机执行快就导致list更新在新数据到来之前就执行了导致看不到更新效果。 save(){...this.list() //新增},回显家具信息并完成修改思路分析完成后台代码从mapper-service-controller,并对代码进行测试破案了。updateById()这个方法来自于接口IService它是谁实现的呢它自己接口的默认实现 PutMapping(/update)public Result updateFurn(RequestBody Furn furn){log.info(待修改的furnfurn);furnService.updateById(furn);return Result.success();}完成前台代码回显家居信息[方式1直接将点击的表格当前行的数据进行回显方式2先思考尝试完成根据当前行的id(家居id),到db查询对应的数据进行回显]再使用axios发送http请求更新数据将数据绑定显示获取当前行数据的方法就是在该行ClickhandleEditscope.row,在方法区使用该方法带入参数row即可获取。插槽机制row对象转换成JSON格式的过程JSON.parse(JS0N.stringify(row))就是对行数据进行深拷贝这样点击的表格当前行的数据和弹出框的数据是独立的 handleEdit(row){// 输出原始rowconsole.log(row1,row)// 字符串化rowconsole.log(row2,JSON.stringify(row))// JSON格式rowconsole.log(row3,JSON.parse(JSON.stringify(row)))},回显当前行数据。方式1 methods:{handleEdit(row){this.form JSON.parse(JSON.stringify(row)) //获取当前行数据。并放到表单this.dialogVisibletrue //显示表单},从后端拿到数据再回显。方式2修改当前行数据以及成功状态返回。同样也存在Ajax异步更新list()要放在then()里面save(){if(this.form.id){//此时执行更新myRequest.put(/api/update,this.form).then(res{if(res.code200){//更新成功this.$message({type: success,message: res.msg})}else{//更新失败this.$message({type:error,message:更新数据失败})}this.dialogVisible falsethis.list()})}else{//此时执行添加myRequest.post(/api/save,this.form).then(res{// res就是后端输出给前端的结果console.log(res,res)this.dialogVisible falsethis.list()})}},删除家居项思路分析完成后台代码从mapper-service-controller,并对代码进行测试 DeleteMapping(/del/{id})public Result deleteFurn(PathVariable Integer id){furnService.removeById(id);return Result.success();}完成前台代码使用axios发送http请求删除数据将数据绑定显示注意删除的方法是用confirm在el-popconfirm绑定的而不是在el-button用click。 template #defaultscopeel-button link typeprimary sizesmall clickhandleEdit(scope.row)编辑/el-buttonel-popconfirm title确定删除这条记录? confirmhandleDel(scope.row)template #referenceel-button link typeprimary sizesmall删除/el-button/template/el-popconfirm/templatehandleDel方法的具体实现完成后用list()进行刷新。同样注意位置避免ajax异步导致刷新异常。 handleDel(row){myRequest.delete(/api/del/row.id).then(res{if(res.code200){this.$message({type:success,message:res.msg})}else{this.$message({type:error,message:res.msg})}this.list()})}分页功能需求分析1.显示共多少记录2.可以设置每项显示几条3.点击第几页显示对应数据思路分析1.后台使用MyBatis-plus分页插件完成查询2.修改FurnController,增加处理分页显示代码3.完成前台代码加入分页导航并将分页请求和后台接口结合创建config/MybatisplusConfig.java配置类。配置分页插件
Configuration
public class MybatisPlusConfig {Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor(){//需要注入的对象MybatisPlusInterceptor interceptor new MybatisPlusInterceptor();//添加分页插件//设置数据库类型interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));return interceptor;}
}增加分页插件的调用处理application.yml配置输出日志。便于调试mybatis-plus:configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImpl完成后端分页功能 RequestMapping(/page)public Result page(RequestParam(defaultValue 1) Integer pageNum,RequestParam(defaultValue 5) Integer pageSize){PageFurn furnPage furnService.page(new Page(pageNum, pageSize));return Result.success(furnPage);}增加前端分页控件并在数据池完善参数。 divel-paginationv-model:current-pagecurrentPagev-model:page-sizepageSize:page-sizes[5, 10]layouttotal, sizes, prev, pager, next, jumper:totaltotalCountsize-changehandleSizeChangecurrent-changehandleCurrentChange//div完成控件功能完善分页长度显示指定页码内容的方法。注意方法参数名是自定义的由控件传入 methods:{handleSizeChange(pageSize){this.pageSizepageSizethis.list()},handleCurrentChange(currentPage){this.currentPagecurrentPagethis.list()},采用分页方法显示重写显示列表注意url添加参数的格式。而且参数名需要和后端接收参数名一致。注意返回接收数据时表数据和总条数分别来自于records和total。记不得可以利用console的输出自己手动查询变量名称后完善。list(){// 采用分页方式更新数据列表myRequest.get(/api/page,{params:{pageNum:this.currentPage,pageSize:this.pageSize}}).then(res{console.log(res,res)this.tableDatares.data.recordsthis.totalCountres.data.total})},切换数据源为DruidDataSource检查在pom.xml是否已经配置 dependencygroupIdcom.alibaba/groupIdartifactIddruid/artifactIdversion1.1.17/version/dependency创建配置类完成注入Configuration
Slf4j
public class DruidDataSourceConfig {BeanConfigurationProperties(spring.datasource)public DataSource dataSource(){DruidDataSource druidDataSource new DruidDataSource();log.info(数据源{},druidDataSource.getClass());return druidDataSource;}
}注意ConfigurationProperties(spring.datasource)是已经配置在application.yml的spring:datasource:url: jdbc:mysql://localhost:3306/furn_ssm?useSSLtrueuseUnicodetruecharactorEncodingutf-8password: rootusername: rootdriver-class-name: com.mysql.cj.jdbc.Driver带条件检索的分页显示思路分析完成后台代码从mapper-service-controller,并对代码进行测试构造用的是Wrappers的静态方法而不是new ...带条件的分页查找。page(分页条件queryWrapper) RequestMapping(/search)public Result pageBySearch(RequestParam(defaultValue 1)Integer pageNum,RequestParam(defaultValue 5)Integer pageSize,RequestParam(defaultValue )String search){QueryWrapperFurn queryWrapper Wrappers.query();if(StringUtils.hasText(search)){queryWrapper.like(name,search);}PageFurn furnPage furnService.page(new Page(pageNum, pageSize), queryWrapper);return Result.success(furnPage);}完成前台代码使用axios发送http请求完成带条件查询分页显示前端按键添加响应方法el-button clicklist查询/el-button注意参数的增加 list(){//改用带条件的分页查询myRequest.get(/api/search,{params:{pageNum:this.currentPage,pageSize:this.pageSize,search:this.search}}).then(res{...
