网站后台编辑器内容不显示,wordpress完整模板下载,50万做网站,建设局网站信息管理制度七、创建前端项目 你下载了nodejs吗#xff1f;从cn官网下载#xff1a;http://nodejs.cn/download/#xff0c;或者从一个国外org网站下载#xff0c;选择自己想要的版本https://nodejs.org/download/release/#xff0c;双击下载好的安装文件#xff0c;选择安装路径安… 七、创建前端项目 你下载了nodejs吗从cn官网下载http://nodejs.cn/download/或者从一个国外org网站下载选择自己想要的版本https://nodejs.org/download/release/双击下载好的安装文件选择安装路径安装好即可。安装完成后输入命令查看版本mac首次安装都无需配置环境变量。 根据以上命令查看配置信息先在设置路径目录下新建两个文件夹(egnode_global和node_cache)设置新的文件夹
PS D: \nodejs npm config set prefix D: \nodejs\node_global
PS D: \nodejs npm config set cache D: \nodejs\node_cache
PS D: \nodejs npm get registry
https: //registry.npmjs.org/
PS D: \nodejs npm config set registry https://mirrors.cloud.tencent.com/npm/ 下载vue脚手架理论上你应该下载过了
npm install -g vue/cli在cmd中创建vue项目 vue create vuedemo1 powershell中参见下方网页
“vue : 无法加载文件 D:\nodejs\node_global\vue.ps1因为在此系统上禁止运行脚本”的解决方法-CSDN博客 用上下方向键移动然后回车我选择Vue2等待创建完成
执行启动项目命令注意要先进入项目目录 cd vuedemo1 npm run serve 现在cd在desktopvue create wms-web选择vue2Take A While...... cd进入npm run serve成功启动vue脚手架localhost:8080
八、前端项目导到idea中运行
把wms-web复制到springboot_vue_wms中,在idea打开项目,你要是足够nb用webstrom去吧 为了节约时间,不用cmd一条慢慢输入命令,可以选择小绿三角的编译配置 停止服务直接CTRL C 即可 记得把前端的git删除
tmd后面vue服务器频频报错找了我一个半小时问题解决了我的idea不知道为什么对node_modules文件进行了排除变成黄色的右键该文件后将目录标记为不排除就能解决element提示的问题记得更新对应的本地的vue服务器
九、导入Element-ui
Element - 网站快速成型工具 饿了么 nb
注意了这个安装方式和引用方式只适用于vue2vue3用这个会报错就算强行安装上最后运行的时候页面只会是空白的。
npm i element-ui -S
报错可能是版本不匹配 试试npm install element-plus --save
npm install --legacy-peer-deps element-ui --save也行
打开对应的文件管理器发现安装成功 好了现在是VUE时间
记得把main.js必要的修改
import Vue from vue
import App from ./App.vue
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;Vue.config.productionTip false
Vue.use(ElementUI)
new Vue({render: h h(App),
}).$mount(#app)App.vue如下
templatediv idappel-button typeprimaryBUTTON/el-button/div
/templatescriptexport default {name: App,components: {}
}
/scriptstyle/style十、搭建页面布局 难道不用router吗
新建IndexPage.vue文件(后面你会命名为index这里index报错是因为规范是组件名应该是多个单词组成的而不是单个单词。可以考虑IndexPage或者其他的多词命名. 实在说太多不好弄的 , 导入之后报错的在vue.config中配置lintOnSave: false胡说八道 //8 版本中新增了要求组件名称以驼峰格式命名
templateel-container styleheight: 500px; border: 1px solid #eeeel-aside width200px stylebackground-color: rgb(238, 241, 246)el-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i导航一/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项4-1/el-menu-item/el-submenu/el-submenuel-submenu index2template slottitlei classel-icon-menu/i导航二/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index2-1选项1/el-menu-itemel-menu-item index2-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index2-3选项3/el-menu-item/el-menu-item-groupel-submenu index2-4template slottitle选项4/templateel-menu-item index2-4-1选项4-1/el-menu-item/el-submenu/el-submenuel-submenu index3template slottitlei classel-icon-setting/i导航三/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index3-1选项1/el-menu-itemel-menu-item index3-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index3-3选项3/el-menu-item/el-menu-item-groupel-submenu index3-4template slottitle选项4/templateel-menu-item index3-4-1选项4-1/el-menu-item/el-submenu/el-submenu/el-menu/el-asideel-containerel-header styletext-align: right; font-size: 12pxel-dropdowni classel-icon-setting stylemargin-right: 15px/iel-dropdown-menu slotdropdownel-dropdown-item查看/el-dropdown-itemel-dropdown-item新增/el-dropdown-itemel-dropdown-item删除/el-dropdown-item/el-dropdown-menu/el-dropdownspan王小虎/span/el-headerel-mainel-table :datatableDatael-table-column propdate label日期 width140/el-table-columnel-table-column propname label姓名 width120/el-table-columnel-table-column propaddress label地址/el-table-column/el-table/el-main/el-container/el-container/templatestyle scoped
.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;
}.el-aside {color: #333;
}
/stylescript
export default {name:IndexPage,data() {const item {date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄};return {tableData: Array(20).fill(item)}}
};
/script
App.vue相应的添加
templatediv idappIndexPage/IndexPage/div
/templatescriptimport IndexPage from /components/IndexPage.vue;export default {name: App,components: {IndexPage}
}
/scriptstyle
/*font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;*/
/style白屏是因为外层需要template
根据你的需求微修一下,我对部分部件进行了height:100%的代码修改
在assets下新建一个global.css文件在main.js中导入 import ./assets/global.css
*{margin:0;padding: 0;
}
在IndexPage中style添加
.el-main{padding:5px;
}十一、页面布局的拆分 原页面太长了在components中新建几个界面AppAside.vueAppHeader.vueIndexPage.vueAppMain.vue
AppAside是将menu部分剪切到template中将dropdown中给到AppHeadertable复制到Appmain 其实是想改成MainComponent的 下面是IndexPage.vue
templateel-container styleheight: 100%; border: 1px solid #eeeel-aside width200px stylebackground-color: rgb(238, 241, 246);height: 100%AppAside/AppAside/el-asideel-container styleheight: 100%el-header styletext-align: right; font-size: 12px ;AppHeader/AppHeaderspan王小虎/span/el-headerel-main styleheight: 100%AppMain/AppMain/el-main/el-container/el-container/templatestyle scoped
.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;
}
.el-main{padding:5px;
}
.el-aside {color: #333;
}
/stylescript
import AppAside from /components/AppAside.vue;
import AppHeader from /components/AppHeader.vue;
import AppMain from /components/AppMain.vue;export default {name:IndexPage,components: {AppMain, AppHeader, AppAside},
};
/script 如果有包版本的冲突npm install --legacy-peer-deps
十二、编写Header头页面
1.dropdown下拉
click和click.native有什么区别如何阻止第三方组件内部的冒泡一.click和click.nati - 掘金
这是一篇文章在vue3的部分同学们可能对native的选择有帮助 AppHeader.vue
templatediv styledisplay:flex;line-height:60px;divi classel-icon-s-fold stylefont-size:20px;vertical-align: middle;/i/divdiv styleflex:1;text-align:center;font-size:27px;span欢迎来到仓库管理系统/span/divspan王小虎/spanel-dropdown triggerclicki classel-icon-arrow-down stylemargin-left:5px;/iel-dropdown-menu slotdropdown!--直接给图标加line-height:60px就居中了;加上height和line-height让他们相等就可以让文本垂直居中;加垂直vertical-align: middle;应该就好了--el-dropdown-item click.nativetoUser个人中心/el-dropdown-itemel-dropdown-item click.nativelogout退出登录/el-dropdown-item/el-dropdown-menu/el-dropdown/div
/templatestyle scoped/style
scriptexport default{name:AppHeader,methods:{toUser() {console.log(to_user)},logout(){console.log(logout)},}}
/script IndexPage.vue部分
el-container styleheight: 100%; border: 1px solid #eeeel-aside width200px stylebackground-color: rgb(238, 241, 246);height: 100%AppAside/AppAside/el-aside
2.菜单伸缩图标
原先的太多了不符合项目的要求
这里是因为设置了1px的border
3.欢迎字样
4.去除背景加入下边框
十三、菜单导航页面编写
一级菜单AppHeader.vue
templatediv styledisplay:flex;line-height:60px;divi classel-icon-s-fold stylefont-size:20px;vertical-align: middle;/i/divdiv styleflex:1;text-align:center;font-size:27px;span欢迎来到仓库管理系统/span/divspan王小虎/spanel-dropdown triggerclicki classel-icon-arrow-down stylemargin-left:5px;/iel-dropdown-menu slotdropdown!--直接给图标加line-height:60px就居中了;加上height和line-height让他们相等就可以让文本垂直居中;加垂直vertical-align: middle;应该就好了--el-dropdown-item click.nativetoUser个人中心/el-dropdown-itemel-dropdown-item click.nativelogout退出登录/el-dropdown-item/el-dropdown-menu/el-dropdown/div
/templatestyle scoped/style
scriptexport default{name:AppHeader,methods:{toUser() {console.log(to_user)},logout(){console.log(logout)},}}
/script
十四、菜单导航页面伸缩
伸缩的思路图标和文字收起和展开是有变量的根据element的官方文档对aside修改 两相对比发现动画不太流畅影响观感 。 并且header的选项把信号跨组件给到aside可以回去看看vue的多种跨组件方法吗Vue跨组件通信8种方式汇总 可以直接使用全局事件总线快很多这里提供一个不太好的方法很卡header点击图标---提交---父组件--改变--aside子组件collapse
IndexPage.vue
templateel-container styleheight: 100%; border: 1px solid #eeeel-aside :widthaside_width stylebackground-color: rgb(238, 241, 246);height: 100% ;margin-left:-1pxAppAside :isCollapseisCollapse/AppAside/el-asideel-container styleheight: 100%el-header styletext-align: right; font-size: 12px ;height:100%;border-bottom: rgba(168,168,168,0.3) 1px solidAppHeader doCollapsedoCollapse :iconicon/AppHeader/el-headerel-main styleheight: 100%AppMain/AppMain/el-main/el-container/el-container/templatestyle scoped
.el-header {/*background-color:#B3C0D1;*/color: #333;line-height: 60px;
}
.el-main{padding:5px;
}
.el-aside {color: #333;
}
/stylescript
import AppAside from /components/AppAside.vue;
import AppHeader from /components/AppHeader.vue;
import AppMain from /components/AppMain.vue;
import appAside from /components/AppAside.vue;export default {name:IndexPage,computed: {appAside() {return appAside}},components: {AppMain, AppHeader, AppAside},data(){return {isCollapse:false,aside_width:200px,icon:el-icon-s-fold}},methods:{doCollapse(){console.log(11111)this.isCollapse !this.isCollapseif(!this.isCollapse){//默认展开,你想写三目也行 this.isCollapse true?this.changeWidth64px:this.changeWidth200pxthis.aside_width200pxthis.iconel-icon-s-fold}else{this.aside_width62pxthis.iconel-icon-s-unfold}}}
};
/script
AppHeader.vue
templatediv styledisplay:flex;line-height:60px;div stylecursor:pointer;i :classicon stylefont-size:20px;vertical-align: middle; clickcollapse/i/divdiv styleflex:1;text-align:center;font-size:27px;span欢迎来到仓库管理系统/span/divspan王小虎/spanel-dropdown triggerclicki classel-icon-arrow-down stylemargin-left:5px;/iel-dropdown-menu slotdropdown!--直接给图标加line-height:60px就居中了;加上height和line-height让他们相等就可以让文本垂直居中;加垂直vertical-align: middle;应该就好了--el-dropdown-item click.nativetoUser个人中心/el-dropdown-itemel-dropdown-item click.nativelogout退出登录/el-dropdown-item/el-dropdown-menu/el-dropdown/div
/templatestyle scoped/style
scriptexport default{name:AppHeader,props:{icon:String},methods:{toUser() {console.log(to_user)},logout(){console.log(logout)},collapse(){this.$emit(doCollapse)}}}
/script
AppAside.vue
templateel-menubackground-color#545c64text-color#fffactive-text-color#ffd04bstyleheight:100vh;default-active/Home:collapseisCollapse:collapse-transitionfalseel-menu-item index/Onei classel-icon-s-home/ispan slottitle首页/span/el-menu-itemel-menu-item index/Twoi classel-icon-s-flag/ispan slottitle导航一/span/el-menu-itemel-menu-item index/Homei classel-icon-s-opportunity/ispan slottitle导航二/span/el-menu-item/el-menu
/templatestyle scoped/style
scriptexport default{name:AppAside,data(){return{// isCollapse:false}},props:{isCollapse:Boolean}}
/script
十五、axios的安装和处理跨域 1.安装axios npm install axios --save
在main.js全局引入axios
import axios from axios;
Vue.prototype.$axios axios;
跨域解决SpringBoot跨域问题8种方法含网关、-CSDN博客SpringBoot解决跨域的5种方式_springboot跨域-CSDN博客
package com.wms.common;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;Configuration
public class CorsConfig implements WebMvcConfigurer{overridepublic void addCorsMappings(CorsRegistry registry{registry.addMapping(/**)//是否发送Cookie.allowCredentials(true)//放行哪些原始域.aliowedOriginPatterns(*).allowedMethods(new String[]{GETPOSTPUTDELETE}).allowedHeaders(*).exposedHeaders(*);}
}
get使用 这个get前端写法已经过时了
this.$axios.get(http://localhost:8090/1ist).then(res{console.log(res)})
post使用
this.$axios.post(http://localhost:8091/user/1istP,()).then(res{
console.log(res)
})
将地址设置为全局,记得开mysql啊啊啊啊啊啊 实际上跨域可以一个CrossOrigin解决CrossOrigin使用场景要求jdk1.8Spring4.2 但是请在wms/src/main/java/com.wms/common新建CorConfig.java
package com.wms.common;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;// 案例 一
Configuration
public class CorsConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping(/**)//是否发送Cookie.allowCredentials(true)//放行哪些原始域.allowedOriginPatterns(*).allowedMethods(new String[]{GET, POST, PUT, DELETE}).allowedHeaders(*).exposedHeaders(*);}
} AppMain中
methods:{loadGet(){this.$axios.get(http://localhost:8090/user/list).then(resres.data).then(res{console.log(res)})}
}, 这个sql显示要在yml文件里加配置可以搜mybatis控制台打印sql配置
请在pom中添加
dependencygroupIdorg.apache.commons/groupIdartifactIdcommons-lang3/artifactIdversion3.12.0/version !-- 请使用最新的版本号 --/dependency
你可以将 StringUtil.isNotBlack(user.getName()) 替换为 StringUtils.isNotBlank(user.getName())。这样就可以正确地判断 user.getName() 是否既非 null 又不是空白字符串了。 在main.js中添加从而全局地址
Vue.prototype.$httpUrlhttp://localhost:8090 this.$axios.get(this.$httpUrl/user/list).then(resres.data).then(res{可以把$httpUrl去掉去用去拦截这里就不这么搞了。
request.js可供选择使用我就不用了Vue项目搭建常用的配置文件request.js和vue.config.js_vue项目搭建常用的配置文件,request.js和vue.config.js-CSDN博客
// 1.引入axios
// 2.axios.create方法创建实例
// 3.使用实例对象创建请求拦截器
// 4.使用实例创建响应拦截器
// 5.export抛出实例对象
// 6.main.js中引入request文件对象
import axios from axios
import store from /store/index
const Server axios.create({baseURL:,timeout:3000
})
//使用Server创建请求拦截器
Server.interceptors.request.use(function(config){store.commit(setLoading,true) //设置loading效果return config;
},function(error){return Promise.reject(error)
})
//使用Server创建响应拦截器
Server.interceptors.response.use(function(response){console.log(response);//判断接口返回的数据成功直接返回数据中data数据if(response.status 200){setTimeout(() {store.commit(setLoading,false) //设置loading效果}, 1000);return response.data;}return response;
},function(error){return Promise.reject(error);
});
export default ServerUserController.java部分
//查询模糊、匹配PostMapping(/listP)public ListUser listP(RequestBody User user) {LambdaQueryWrapperUser lambdaQueryWrapper new LambdaQueryWrapper();if(StringUtils.isNotBlank(user.getName())){lambdaQueryWrapper.like(User::getName, user.getName());}//lambdaQueryWrapper.like(User::getName, user.getName());//lambdaQueryWrapper.eq(User::getName, user.getName());//eq就是完全匹配return userService.list(lambdaQueryWrapper);}
Appmain.vue部分 scriptexport default{name:AppMain,/*其实是想改成MainComponent的*/data() {return {tableData: Array(10).fill(item)}},methods:{loadGet(){this.$axios.get(this.$httpUrl/user/list).then(resres.data).then(res{console.log(res)})},loadPost(){this.$axios.post(this.$httpUrl/user/listP,{}).then(resres.data).then(res{console.log(res)})}},beforeMount() {this.loadGet()}}
/script
十六、列表展示
1.列表数据 2.用tag转换列 3.header-cell-style设置表头样式 4.加上边框 5.按钮编辑、删除 6.后端返回结果封装Result AppMain.vue的需修改
templateel-table :datatableDatael-table-column propid labelID width60/el-table-columnel-table-column propno label账号 width120/el-table-columnel-table-column propname label姓名 width80/el-table-columnel-table-column propage label年龄 width80/el-table-columnel-table-column propsex label性别 width80/el-table-columnel-table-column proproleId label角色 width80/el-table-columnel-table-column propphone label电话 width120/el-table-columnel-table-column propoperate label操作/el-table-column/el-table
/templatestyle scoped/stylescriptexport default{name:AppMain,/*其实是想改成MainComponent的*/data() {return {tableData:[]}},methods:{loadGet(){this.$axios.get(this.$httpUrl/user/list).then(resres.data).then(res{console.log(res)})},loadPost(){this.$axios.post(this.$httpUrl/user/listP,{}).then(resres.data).then(res{console.log(res)this.tableDatares})}},beforeMount() {this.loadPost()}}
/script
这里我还报错了改了loadPost才正确这是tyqw的建议
从你的代码来看问题可能出在以下几个方面
1. **API 调用方式**你在 loadGet 方法中使用了 GET 请求来获取用户列表但在 loadPost 方法中使用了 POST 请求。如果你的后端 API 需要通过 POST 请求来获取用户列表那么你应该只保留一个方法并确保它正确地调用了后端接口。
2. **响应处理**你需要将后端返回的数据赋值给 tableData 数组以便在 Vue 组件中显示这些数据。目前你只是打印了返回的数据但没有将其赋值给 tableData。
3. **组件生命周期钩子**你可以在 mounted 生命周期钩子中调用加载数据的方法而不是在 beforeMount 中。这样可以确保 DOM 已经渲染完毕后再进行数据请求和更新。
4. **错误处理**建议添加错误处理逻辑以防止网络或服务器出现问题时导致应用崩溃。
以下是修改后的代码示例
templateel-table :datatableData!-- ... --/el-table
/templatescript
export default {name: AppMain,data() {return {tableData: []};},mounted() {this.loadData();},methods: {loadData() {// 确保使用正确的 HTTP 方法GET 或 POSTconst method POST; // 根据实际需求选择 GET 或 POSTif (method GET) {this.$axios.get(this.$httpUrl /user/list).then(response {this.tableData response.data;}).catch(error {console.error(Error fetching data:, error);});} else if (method POST) {this.$axios.post(this.$httpUrl /user/listP, {}).then(response {this.tableData response.data;}).catch(error {console.error(Error fetching data:, error);});}}}
};
/script
请注意以下几点 - 将 beforeMount 改为 mounted。 - 在 loadData 方法中根据实际情况选择 GET 或 POST 请求。 - 将后端返回的数据直接赋值给 tableData。 - 添加错误处理逻辑。
这样应该可以帮助你解决“暂无数据”的问题。如果问题仍然存在请检查后端 API 的 URL 是否正确以及返回的数据格式是否符合预期。 2.用tag转换列
templateel-table :datatableDatael-table-column propid labelID width60/el-table-columnel-table-column propno label账号 width120/el-table-columnel-table-column propname label姓名 width80/el-table-columnel-table-column propage label年龄 width80/el-table-columnel-table-column propsex label性别 width80template slot-scopescopeel-tag:typescope.row.sex 1 ?primary:successdisable-transitions{{scope.row.sex 1 ?男:女}}/el-tag/template/el-table-columnel-table-column proproleId label角色 width120template slot-scopescopeel-tag:typescope.row.roleId 0 ?danger:(scope.row.roleId 1 ?primary:success)disable-transitions{{scope.row.roleId 0 ?超级管理员:(scope.row.roleId 1 ?管理员:用户)}}/el-tag/template/el-table-columnel-table-column propphone label电话 width120/el-table-columnel-table-column propoperate label操作/el-table-column/el-table
/template
可能会报错idea又抽风了进一步修改
el-table-column propoperate label操作el-button sizesmall typesuccess编辑/el-buttonel-button sizesmall typedanger删除/el-button
/el-table-column
修改对应的Usercontroller.java因为你是一个列表查出来的数据就放进去就好
//查询模糊、匹配PostMapping(/listP)public Result listP(RequestBody User user) {LambdaQueryWrapperUser lambdaQueryWrapper new LambdaQueryWrapper();if(StringUtils.isNotBlank(user.getName())){lambdaQueryWrapper.like(User::getName, user.getName());}//lambdaQueryWrapper.like(User::getName, user.getName());//lambdaQueryWrapper.eq(User::getName, user.getName());//eq就是完全匹配return Result.success(userService.list(lambdaQueryWrapper));}
重启后端服务WmsApplication这时前端刷新后什么都没有是正常的因为数据经过了一层封装在AppMain中修改loadPost如下对200进行判定
loadPost(){this.$axios.post(this.$httpUrl/user/listP,{}).then(resres.data).then(res{console.log(res)if(res.code200){this.tableDatares.data}else{alert(获取数据失败请刷新页面)}})}
十七、分页查询
1.页面加上分页代码 2.修改查询方法和参数 3.处理翻页、设置条数逻辑注意一个问题
部分AppMain.vue
.......................el-table-column propoperate label操作el-button sizesmall typesuccess编辑/el-buttonel-button sizesmall typedanger删除/el-button/el-table-column/el-tableel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage4:page-sizes[2, 5, 10, 20, 50]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div
/templatestyle scoped/stylescriptexport default{name:AppMain,/*其实是想改成MainComponent的*/data() {return {tableData:[],pageSize:10,pageNum:1,total:0}},methods:{loadGet(){this.$axios.get(this.$httpUrl/user/list).then(resres.data).then(res{console.log(res)})},loadPost(){this.$axios.post(this.$httpUrl/user/listPageC1,{pageSize:this.pageSize,pageNum:this.pageNum}).then(resres.data).then(res{console.log(res)if(res.code200){this.tableDatares.datathis.totalres.total}else{alert(获取数据失败请刷新页面)}})},handleSizeChange(val) {console.log(每页 ${val} 条);this.pageNum1//这个错误是先翻到第二页在调页面条数显示无数据this.pageSizevalthis.loadPost()},handleCurrentChange(val) {console.log(当前页: ${val});this.pageNumvalthis.loadPost()}},beforeMount() {this.loadPost()}}
/script QueryPageParam.java
private HashMap parma new HashMap(); UserController.vue
PostMapping(/listPageC1)//public ListUserlistPage(RequestBody HashMap map){public Result listPageC1(RequestBody QueryPageParam query) {HashMap param query.getParam();String name (String) param.get(name);System.out.println(name (String) param.get(name));PageUser page new Page();page.setCurrent(query.getPageNum());page.setSize(query.getPageSize());LambdaQueryWrapperUser lambdaQueryWrapper new LambdaQueryWrapper();if(StringUtils.isNotBlank(name)!null.equals(name)) {lambdaQueryWrapper.like(User::getName, name);}//IPage resultuserService.pageC(page);IPage resultuserService.pageCC(page,lambdaQueryWrapper);System.out.println(totalresult.getTotal());return Result.success(result.getRecords(),result.getTotal());//提醒listPageC1的return记得改}
十八、查询处理
1.查询的布局包含查询、重置按钮 2.输入框在appmain.vue中如此
templatedivdiv stylemargin-left:5pxel-input v-modelname placeholder请输入名字: suffix-iconel-icon-search stylewidth:200px;/el-inputel-button type primary stylemargin-left:5px clickloadPost查询/el-buttonel-button typesuccess重置/el-button/divel-table :datatableData:header-cell-style{background:#e0ecf4,color:#555}border
main.js中如此
//Vue.use(ElementUI)
Vue.use(ElementUI,{size:small}) 查询要把数据传到后端去啊loadpost需要传一个name过去啊param是代表需要传的参数啊 。就是那个querypageparam一起封装的啊hashmap param想传什么传什么
3下拉框 4.回车事件查询keyup.enter.native 5.重置处理新增
el-input v-modelname placeholder请输入名字: suffix-iconel-icon-search stylewidth:200px;keyup.enter.nativeloadPost/el-input!--Vue3输入框回车事件用changeloadPostPage,重置只需加 clearable属性--el-select v-modelsex filterableplacehoLder请选择性别el-optionv-foritem in sexs:keyitem.value:labelitem.label:valueitem.value/el-option/el-select
..................
..................
..................
export default{name:AppMain,/*其实是想改成MainComponent的*/data() {return {tableData:[],pageSize:10,pageNum:1,total:0,name:,sex:,sexs:[{value:1,label:男},{value:0,label:女}],}},
可以优化获取当前触发事件的dom的参数再去执行axios请求不然每次都要给后端发送一大堆数据 usercontroller部分如下
PostMapping(/listPageC1)//public ListUserlistPage(RequestBody HashMap map){public Result listPageC1(RequestBody QueryPageParam query) {HashMap param query.getParam();String name (String) param.get(name);//System.out.println(name (String) param.get(name));String sex (String) param.get(sex);PageUser page new Page();page.setCurrent(query.getPageNum());page.setSize(query.getPageSize());LambdaQueryWrapperUser lambdaQueryWrapper new LambdaQueryWrapper();if(StringUtils.isNotBlank(name)!null.equals(name)) {lambdaQueryWrapper.like(User::getName, name);}if(StringUtils.isNotBlank(sex)) {lambdaQueryWrapper.eq(User::getSex, sex);}//IPage resultuserService.pageC(page);IPage resultuserService.pageCC(page,lambdaQueryWrapper);System.out.println(totalresult.getTotal());return Result.success(result.getRecords(),result.getTotal());//提醒listPageC1的return记得改} Appmain.vue div stylemargin-left:5pxel-input v-modelname placeholder请输入名字: suffix-iconel-icon-search stylewidth:200px;keyup.enter.nativeloadPost/el-input!--Vue3输入框回车事件用changeloadPostPage,重置只需加 clearable属性--el-select v-modelsex filterableplacehoLder请选择性别 stylemargin-left:5pxel-optionv-foritem in sexs:keyitem.value:labelitem.label:valueitem.value/el-option/el-selectel-button type primary stylemargin-left:5px clickloadPost查询/el-buttonel-button typesuccess clickresetParam重置/el-button!--重置好像在input里面添加个clearable可以实现名字的清空;直接重置接post如何?--/div
........................
..........................
..........................
.....................methods中添加这个
resetParam(){this.namethis.sex},
你的代码已经相当不错了但确实有一些地方可以优化。特别是关于减少不必要的数据传输可以通过优化前端逻辑来实现。下面是几个建议
1. **动态构建请求参数** 可以通过一个方法来动态构建要发送给后端的数据对象这样可以确保只有用户实际更改过的字段才会包含在请求中。
2. **使用计算属性** 对于那些依赖于其他数据变化而变化的数据可以考虑使用计算属性computed properties这可以帮助减少不必要的数据处理。
3. **事件委托** 虽然在这个例子中并不适用但在某些情况下使用事件委托可以减少DOM监听器的数量提高性能。
4. **优化按钮操作** 你可以将loadPost方法的调用封装在一个新的方法中以便更好地控制何时以及如何发送请求。
以下是根据上述建议对你的代码进行的一些优化
templatedivdiv stylemargin-left:5pxel-input v-modelsearchParams.name placeholder请输入名字: suffix-iconel-icon-search stylewidth:200px; keyup.enter.nativefetchData/el-inputel-select v-modelsearchParams.sex filterable placeholder请选择性别 stylemargin-left:5pxel-optionv-foritem in sexs:keyitem.value:labelitem.label:valueitem.value/el-option/el-selectel-button typeprimary stylemargin-left:5px clickfetchData查询/el-buttonel-button typesuccess clickresetParams重置/el-button/divel-table :datatableData :header-cell-style{background:#e0ecf4,color:#555} border!-- 表格列定义保持不变 --/el-tableel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:page-sizes[2, 5, 10, 20, 50]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div
/templatescript
export default {name: MainComponent,data() {return {tableData: [],pageSize: 10,pageNum: 1,total: 0,searchParams: {name: ,sex: },sexs: [{ value: 1, label: 男 },{ value: 0, label: 女 }]};},methods: {fetchData() {const params {pageSize: this.pageSize,pageNum: this.pageNum,...this.searchParams // 展开搜索参数对象};// 过滤掉值为空的参数避免向后端发送多余的数据const filteredParams Object.fromEntries(Object.entries(params).filter(([_, v]) v ! v ! null));this.$axios.post(this.$httpUrl /user/listPageC1, filteredParams).then(res res.data).then(res {if (res.code 200) {this.tableData res.data;this.total res.total;} else {alert(获取数据失败请刷新页面);}});},resetParams() {this.searchParams.name ;this.searchParams.sex ;},handleSizeChange(val) {this.pageSize val;this.pageNum 1; // 切换每页数量时重置页码为第一页this.fetchData();},handleCurrentChange(val) {this.pageNum val;this.fetchData();}},beforeMount() {this.fetchData();}
};
/script
主要改动点
- 将查询条件集中管理到 searchParams 对象中便于管理和传递。- 在 fetchData 方法中通过解构赋值和过滤只发送非空的查询参数给后端。- 使用 fetchData 方法统一处理数据加载简化了代码逻辑。- 修改组件名为 MainComponent符合你的需求。
这些改动应该能帮助你减少不必要的数据传输并使代码更加简洁高效。
十九、新增
1.新增按钮
2.弹出窗口添加对centerDialogVisible的判定以及弹窗 el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage4:page-sizes[2, 5, 10, 20, 50]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totaltotal/el-paginationel-dialogtitle提示:visible.synccenterDialogVisiblewidth30%centerspan需要注意的是内容是默认不居中的/spanspan slotfooter classdialog-footerel-button clickcenterDialogVisiblefalse取消/el-buttonel-button typeprimary clickcenterDialogVisiblefalse确定/el-button/span/el-dialog/div
/template.................
..................
..................
sexs: [{value: 1,label: 男}, {value: 0,label: 女}],centerDialogVisible: false}},methods: {add() {this.centerDialogVisible true},
3.编写表单vue项目表单中使用resetFields()报错或未生效-CSDN博客
4.提交数据提示信息、列表刷新
5.数据的检查
哎呦wc一定一定一定要注意啊from和form由于键盘手快打错了找了我2hours的bugcnm
AppMain.vue
templatedivdiv stylemargin-left:5pxel-input v-modelname placeholder请输入名字: suffix-iconel-icon-search stylewidth:200px;keyup.enter.nativeloadPost/el-input!--Vue3输入框回车事件用changeloadPostPage,重置只需加 clearable属性--el-select v-modelsex filterable placehoLder请选择性别 stylemargin-left:5pxel-optionv-foritem in sexs:keyitem.value:labelitem.label:valueitem.value/el-option/el-selectel-button typeprimary stylemargin-left:5px clickloadPost查询/el-buttonel-button typesuccess clickresetParam重置/el-button!--重置好像在input里面添加个clearable可以实现名字的清空;直接重置接post如何?--el-button typeprimary stylemargin-left:5px clickadd新增/el-button/divel-table :datatableData:header-cell-style{background:#e0ecf4,color:#555}borderel-table-column propid labelID width60/el-table-columnel-table-column propno label账号 width120/el-table-columnel-table-column propname label姓名 width80/el-table-columnel-table-column propage label年龄 width80/el-table-columnel-table-column propsex label性别 width80template slot-scopescopeel-tag:typescope.row.sex 1 ?primary:successdisable-transitions{{ scope.row.sex 1 ? 男 : 女 }}/el-tag/template/el-table-columnel-table-column proproleId label角色 width120template slot-scopescopeel-tag:typescope.row.roleId 0 ?danger:(scope.row.roleId 1 ?primary:success)disable-transitions{{ scope.row.roleId 0 ? 超级管理员 : (scope.row.roleId 1 ? 管理员 : 用户) }}/el-tag/template/el-table-columnel-table-column propphone label电话 width120/el-table-columnel-table-column propoperate label操作el-button sizesmall typesuccess编辑/el-buttonel-button sizesmall typedanger删除/el-button/el-table-column/el-tableel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage4:page-sizes[2, 5, 10, 20, 50]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totaltotal/el-paginationel-dialogtitle提示:visible.synccenterDialogVisiblewidth30%centerel-form refform :rulesrules :modelform label-width80pxel-form-item label账号 propnoel-col :span20el-input v-modelform.no/el-input/el-col/el-form-itemel-form-item label密码 proppasswordel-col :span20el-input v-modelform.password/el-input/el-col/el-form-itemel-form-item label名字 propnameel-col :span20el-input v-modelform.name/el-input/el-col/el-form-itemel-form-item label年龄 propageel-col :span20el-input v-modelform.age/el-input/el-col/el-form-itemel-form-item label性别el-radio-group v-modelform.sexel-radio label1男/el-radioel-radio label0女/el-radio/el-radio-group/el-form-itemel-form-item label电话 propphoneel-col :span20el-input v-modelform.phone/el-input/el-col/el-form-item/el-formspan slotfooter classdialog-footerel-button clickcenterDialogVisiblefalse取消/el-buttonel-button typeprimary clicksave确定/el-button/span/el-dialog/div
/templatestyle scoped/stylescript
export default {name: AppMain,/*其实是想改成MainComponent的*/data() {let checkAge (rule, value, callback) {if (value 150) {callback(new Error(年龄太大lbd再来我让你飞起来));} else {callback();}};let checkDuplicate (rule, value, callback) {if (this.form.id) {return callback();}this.$axios.get(this.$httpUrl/user/findByNo?no this.form.no).then(resres.data).then(res {if (res.code! 200) {//es6解构也可以callback();} else {callback(new Error(账号已经存在));}});};return {tableData: [],pageSize: 10,pageNum: 1,currentPage4: 1, // 新增这一行来初始化 currentPage4 的值total: 0,name: ,sex: ,sexs: [{value: 1,label: 男}, {value: 0,label: 女}],centerDialogVisible: false,form: {name: ,no: ,age: ,password: ,phone: ,sex: 0,roleId: 2},rules: {no: [{required: true, message: 请输入账号, trigger: blur},{min: 3, max: 8, message: 长度在3-8个字符, trigger: blur},{validator: checkDuplicate, trigger: blur}],name: [{required: true, message: 请输入名字, trigger: blur},],password: [{required: true, message: 请输入密码, trigger: blur},{min: 4, max: 10, message: 长度在4-10个字符之间, trigger: blur}],age: [{required: true, message: 请输入年龄, trigger: blur},{min: 1, max: 3, message: 长度在1到3个位, trigger: blur},{pattern: /^([1-9][0-9]*){1,3}$/, message: 年龄必须为正整数字, trigger: blur},{validator: checkAge, trigger: blur}],phone: [{required: true, message: 手机号不能为空, trigger: blur},{pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: 请输入正确的手机号码, trigger: blur}]}}},methods: {resetForm() {this.$refs.form.resetFields();},add() {this.centerDialogVisible truethis.$nextTick((){this.resetForm()})},save() {this.$refs.form.validate((valid) {if (valid) {this.$axios.post(this.$httpUrl /user/save, this.form).then(res res.data).then(res {console.log(res)if (res.code 200) {this.$message({message: 操作成功!,type: success});this.centerDialogVisible falsethis.loadPost();this.resetForm()} else {this.$message({message: 操作失败!请返回重新操作...,type: error});}});} else {console.log(error submit!!);return false;}});},loadGet() {this.$axios.get(this.$httpUrl /user/list).then(res res.data).then(res {console.log(res)})},loadPost() {this.$axios.post(this.$httpUrl /user/listPageC1, {pageSize: this.pageSize,pageNum: this.pageNum,param: {name: this.name,sex: this.sex,}}).then(res res.data).then(res {console.log(res)if (res.code 200) {this.tableData res.datathis.total res.total} else {alert(获取数据失败请刷新页面)}})},resetParam() {this.name this.sex },handleSizeChange(val) {console.log(每页 ${val} 条);this.pageNum 1//这个错误是先翻到第二页在调页面条数显示无数据this.pageSize val;this.loadPost();},handleCurrentChange(val) {console.log(当前页: ${val});this.pageNum valthis.loadPost();}},beforeMount() {this.loadPost()}
}
/script
UserController.java部分 GetMapping(/findByNo)public Result findByNo(RequestParam String no) {List listuserService.lambdaQuery().eq(User::getNo, no).list();return list.size()0?Result.success(list):Result.fail();}
编辑
templatedivdiv stylemargin-left:5pxel-input v-modelname placeholder请输入名字: suffix-iconel-icon-search stylewidth:200px;keyup.enter.nativeloadPost/el-input!--Vue3输入框回车事件用changeloadPostPage,重置只需加 clearable属性--el-select v-modelsex filterable placehoLder请选择性别 stylemargin-left:5pxel-optionv-foritem in sexs:keyitem.value:labelitem.label:valueitem.value/el-option/el-selectel-button typeprimary stylemargin-left:5px clickloadPost查询/el-buttonel-button typesuccess clickresetParam重置/el-button!--重置好像在input里面添加个clearable可以实现名字的清空;直接重置接post如何?--el-button typeprimary stylemargin-left:5px clickadd新增/el-button/divel-table :datatableData:header-cell-style{background:#e0ecf4,color:#555}borderel-table-column propid labelID width60/el-table-columnel-table-column propno label账号 width120/el-table-columnel-table-column propname label姓名 width80/el-table-columnel-table-column propage label年龄 width80/el-table-columnel-table-column propsex label性别 width80template slot-scopescopeel-tag:typescope.row.sex 1 ?primary:successdisable-transitions{{ scope.row.sex 1 ? 男 : 女 }}/el-tag/template/el-table-columnel-table-column proproleId label角色 width120template slot-scopescopeel-tag:typescope.row.roleId 0 ?danger:(scope.row.roleId 1 ?primary:success)disable-transitions{{ scope.row.roleId 0 ? 超级管理员 : (scope.row.roleId 1 ? 管理员 : 用户) }}/el-tag/template/el-table-columnel-table-column propphone label电话 width120/el-table-columnel-table-column propoperate label操作template slot-scopescopeel-button sizesmall typesuccess clickmod(scope.row)编辑/el-buttonel-button sizesmall typedanger clickdel删除/el-button/template/el-table-column/el-tableel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage4:page-sizes[2, 5, 10, 20, 50]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totaltotal/el-paginationel-dialogtitle提示:visible.synccenterDialogVisiblewidth30%centerel-form refform :rulesrules :modelform label-width80pxel-form-item label账号 propnoel-col :span20el-input v-modelform.no/el-input/el-col/el-form-itemel-form-item label密码 proppasswordel-col :span20el-input v-modelform.password/el-input/el-col/el-form-itemel-form-item label名字 propnameel-col :span20el-input v-modelform.name/el-input/el-col/el-form-itemel-form-item label年龄 propageel-col :span20el-input v-modelform.age/el-input/el-col/el-form-itemel-form-item label性别el-radio-group v-modelform.sexel-radio label1男/el-radioel-radio label0女/el-radio/el-radio-group/el-form-itemel-form-item label电话 propphoneel-col :span20el-input v-modelform.phone/el-input/el-col/el-form-item/el-formspan slotfooter classdialog-footerel-button clickcenterDialogVisiblefalse取消/el-buttonel-button typeprimary clicksave确定/el-button/span/el-dialog/div
/templatestyle scoped/stylescript
export default {name: AppMain,/*其实是想改成MainComponent的*/data() {let checkAge (rule, value, callback) {if (value 150) {callback(new Error(年龄太大lbd再来我让你飞起来));} else {callback();}};let checkDuplicate (rule, value, callback) {if (this.form.id) {return callback();}this.$axios.get(this.$httpUrl/user/findByNo?no this.form.no).then(resres.data).then(res {if (res.code! 200) {//es6解构也可以callback();} else {callback(new Error(账号已经存在));}});};return {tableData: [],pageSize: 10,pageNum: 1,currentPage4: 1, // 新增这一行来初始化 currentPage4 的值total: 0,name: ,sex: ,sexs: [{value: 1,label: 男}, {value: 0,label: 女}],centerDialogVisible: false,form: {id:,name: ,no: ,age: ,password: ,phone: ,sex: 0,roleId: 2},rules: {no: [{required: true, message: 请输入账号, trigger: blur},{min: 3, max: 8, message: 长度在3-8个字符, trigger: blur},{validator: checkDuplicate, trigger: blur}],name: [{required: true, message: 请输入名字, trigger: blur},],password: [{required: true, message: 请输入密码, trigger: blur},{min: 4, max: 10, message: 长度在4-10个字符之间, trigger: blur}],age: [{required: true, message: 请输入年龄, trigger: blur},{min: 1, max: 3, message: 长度在1到3个位, trigger: blur},{pattern: /^([1-9][0-9]*){1,3}$/, message: 年龄必须为正整数字, trigger: blur},{validator: checkAge, trigger: blur}],phone: [{required: true, message: 手机号不能为空, trigger: blur},{pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: 请输入正确的手机号码, trigger: blur}]}}},methods: {resetForm() {this.$refs.form.resetFields();},del(){},mod(row){//this.formrow就可以了this.centerDialogVisible truethis.$nextTick((){this.form.idrow.id;this.form.norow.no;this.form.namerow.name;this.form.sexrow.sex;this.form.agerow.age;//转化成字符串类型this.form.phonerow.phone;this.form.password;this.form.roleIdrow.roleId;})//修改User的时候要确保账号不能修改否则有可能会数据库存在账号相同的情况给账号的input里加个v-bind:disabledisDisabled“,如果是修改就把isDisabled设置为true添加就false},add() {this.centerDialogVisible truethis.$nextTick((){this.resetForm()})},doSave(){this.$axios.post(this.$httpUrl /user/save, this.form).then(res res.data).then(res {console.log(res)if (res.code 200) {this.$message({message: 操作成功!,type: success});this.centerDialogVisible falsethis.loadPost();this.resetForm()} else {this.$message({message: 操作失败!请返回重新操作...,type: error});}});},doMod(){this.$axios.post(this.$httpUrl /user/update, this.form).then(res res.data).then(res {console.log(res);if (res.code 200) {this.$message({message: 操作成功,type: success});this.centerDialogVisible false;this.loadPost();this.resetForm();} else {this.$message({message: 操作失败,type: error});}});},save() {this.$refs.form.validate((valid) {if (valid) {if(this.form.id){this.doMod();}else{this.doSave()}} else {console.log(error submit!!);return false;}});},loadGet() {this.$axios.get(this.$httpUrl /user/list).then(res res.data).then(res {console.log(res)})},loadPost() {this.$axios.post(this.$httpUrl /user/listPageC1, {pageSize: this.pageSize,pageNum: this.pageNum,param: {name: this.name,sex: this.sex,}}).then(res res.data).then(res {console.log(res)if (res.code 200) {this.tableData res.datathis.total res.total} else {alert(获取数据失败请刷新页面)}})},resetParam() {this.name this.sex },handleSizeChange(val) {console.log(每页 ${val} 条);this.pageNum 1//这个错误是先翻到第二页在调页面条数显示无数据this.pageSize val;this.loadPost();},handleCurrentChange(val) {console.log(当前页: ${val});this.pageNum valthis.loadPost();}},beforeMount() {this.loadPost()}
}
/script
UserController.java部分内容
//新增PostMapping(/save)public Result save(RequestBody User user) {return userService.save(user)?Result.success():Result.fail();}//更新PostMapping(/update)public Result update(RequestBody User user) {return userService.updateById(user)?Result.success():Result.fail();}//修改User的时候要确保账号不能修改否则有可能会数据库存在账号相同的情况给账号的input里加个v-bind:disabledisDisabled“,如果是修改就把isDisabled设置为true添加就false//修改PostMapping(/mod)public boolean mod(RequestBody User user) {return userService.updateById(user);}//新增或修改PostMapping(/saveOrMod)public boolean saveOrMod(RequestBody User user) {return userService.saveOrUpdate(user);}
删除
el-table-column propoperate label操作template slot-scopescopeel-button sizesmall typesuccess clickmod(scope.row)编辑/el-buttonel-popconfirmtitle确定删除吗confirmdel(scope.row.id)stylemargin-left:8px;el-button slotreference sizesmall typedanger删除/el-button/el-popconfirm/template/el-table-column/el-table
..............................
..............................
..............................
methods: {resetForm() {this.$refs.form.resetFields();},del(id){this.$axios.get(this.$httpUrl /user/del?idid).then(res res.data).then(res {console.log(res)if (res.code 200) {this.$message({message: 操作成功!,type: success});this.loadPost();} else {this.$message({message: 操作失败!请返回重新操作...,type: error});}});},mod(row){//this.formrow就可以了this.centerDialogVisible truethis.$nextTick((){this.form.idrow.id;this.form.norow.no;this.form.namerow.name;this.form.sexrow.sex;this.form.agerow.age;//转化成字符串类型this.form.phonerow.phone;this.form.password;this.form.roleIdrow.roleId;})//修改User的时候要确保账号不能修改否则有可能会数据库存在账号相同的情况给账号的input里加个v-bind:disabledisDisabled“,如果是修改就把isDisabled设置为true添加就false}, //删除GetMapping(/del)public Result del(RequestParam String id) {return userService.removeById(id)?Result.success():Result.fail();}
文章转载自： http://www.morning.jfbbq.cn.gov.cn.jfbbq.cn http://www.morning.kyjyt.cn.gov.cn.kyjyt.cn http://www.morning.mhnxs.cn.gov.cn.mhnxs.cn http://www.morning.xdjwh.cn.gov.cn.xdjwh.cn http://www.morning.rlksq.cn.gov.cn.rlksq.cn http://www.morning.homayy.com.gov.cn.homayy.com http://www.morning.cxnyg.cn.gov.cn.cxnyg.cn http://www.morning.c7624.cn.gov.cn.c7624.cn http://www.morning.snbrs.cn.gov.cn.snbrs.cn http://www.morning.dansj.com.gov.cn.dansj.com http://www.morning.pmjw.cn.gov.cn.pmjw.cn http://www.morning.gnfkl.cn.gov.cn.gnfkl.cn http://www.morning.gfnsh.cn.gov.cn.gfnsh.cn http://www.morning.kyfrl.cn.gov.cn.kyfrl.cn http://www.morning.fbccx.cn.gov.cn.fbccx.cn http://www.morning.pzdxg.cn.gov.cn.pzdxg.cn http://www.morning.fpxms.cn.gov.cn.fpxms.cn http://www.morning.fhrgk.cn.gov.cn.fhrgk.cn http://www.morning.wjjsg.cn.gov.cn.wjjsg.cn http://www.morning.yzzfl.cn.gov.cn.yzzfl.cn http://www.morning.zmpqh.cn.gov.cn.zmpqh.cn http://www.morning.sdecsd.cn.gov.cn.sdecsd.cn http://www.morning.ktcfl.cn.gov.cn.ktcfl.cn http://www.morning.bypfj.cn.gov.cn.bypfj.cn http://www.morning.ryjl.cn.gov.cn.ryjl.cn http://www.morning.bnxnq.cn.gov.cn.bnxnq.cn http://www.morning.wmmtl.cn.gov.cn.wmmtl.cn http://www.morning.nbybb.cn.gov.cn.nbybb.cn http://www.morning.cczzyy.com.gov.cn.cczzyy.com http://www.morning.gryzk.cn.gov.cn.gryzk.cn http://www.morning.alwpc.cn.gov.cn.alwpc.cn http://www.morning.srbl.cn.gov.cn.srbl.cn http://www.morning.xkgyh.cn.gov.cn.xkgyh.cn http://www.morning.lnwdh.cn.gov.cn.lnwdh.cn http://www.morning.txgjx.cn.gov.cn.txgjx.cn http://www.morning.mcqhb.cn.gov.cn.mcqhb.cn http://www.morning.zdxss.cn.gov.cn.zdxss.cn http://www.morning.nzlqt.cn.gov.cn.nzlqt.cn http://www.morning.dbnrl.cn.gov.cn.dbnrl.cn http://www.morning.roymf.cn.gov.cn.roymf.cn http://www.morning.yrgb.cn.gov.cn.yrgb.cn http://www.morning.xkjrq.cn.gov.cn.xkjrq.cn http://www.morning.wpqwk.cn.gov.cn.wpqwk.cn http://www.morning.xhgxd.cn.gov.cn.xhgxd.cn http://www.morning.fldsb.cn.gov.cn.fldsb.cn http://www.morning.yznsx.cn.gov.cn.yznsx.cn http://www.morning.thpzn.cn.gov.cn.thpzn.cn http://www.morning.dfwkn.cn.gov.cn.dfwkn.cn http://www.morning.pcrzf.cn.gov.cn.pcrzf.cn http://www.morning.tnktt.cn.gov.cn.tnktt.cn http://www.morning.zwwhq.cn.gov.cn.zwwhq.cn http://www.morning.qwdqq.cn.gov.cn.qwdqq.cn http://www.morning.ktntj.cn.gov.cn.ktntj.cn http://www.morning.lnbcx.cn.gov.cn.lnbcx.cn http://www.morning.xzsqb.cn.gov.cn.xzsqb.cn http://www.morning.gbgdm.cn.gov.cn.gbgdm.cn http://www.morning.wnkjb.cn.gov.cn.wnkjb.cn http://www.morning.rshijie.com.gov.cn.rshijie.com http://www.morning.gkktj.cn.gov.cn.gkktj.cn http://www.morning.nlnmy.cn.gov.cn.nlnmy.cn http://www.morning.wkrkb.cn.gov.cn.wkrkb.cn http://www.morning.zdxss.cn.gov.cn.zdxss.cn http://www.morning.jpnw.cn.gov.cn.jpnw.cn http://www.morning.prmyx.cn.gov.cn.prmyx.cn http://www.morning.fhqsm.cn.gov.cn.fhqsm.cn http://www.morning.qbmpb.cn.gov.cn.qbmpb.cn http://www.morning.ftmp.cn.gov.cn.ftmp.cn http://www.morning.xfxlr.cn.gov.cn.xfxlr.cn http://www.morning.cxnyg.cn.gov.cn.cxnyg.cn http://www.morning.xgchm.cn.gov.cn.xgchm.cn http://www.morning.dpmkn.cn.gov.cn.dpmkn.cn http://www.morning.qmzwl.cn.gov.cn.qmzwl.cn http://www.morning.lgnrl.cn.gov.cn.lgnrl.cn http://www.morning.wkws.cn.gov.cn.wkws.cn http://www.morning.bdkhl.cn.gov.cn.bdkhl.cn http://www.morning.jfbbq.cn.gov.cn.jfbbq.cn http://www.morning.jcnmy.cn.gov.cn.jcnmy.cn http://www.morning.sflnx.cn.gov.cn.sflnx.cn http://www.morning.rmkyb.cn.gov.cn.rmkyb.cn http://www.morning.hmpxn.cn.gov.cn.hmpxn.cn
