{"id":735,"date":"2024-12-10T20:28:54","date_gmt":"2024-12-10T12:28:54","guid":{"rendered":"https:\/\/eve2333.top\/?p=735"},"modified":"2024-12-10T20:28:54","modified_gmt":"2024-12-10T12:28:54","slug":"%e9%9d%9e%e5%b8%b8%e7%ae%80%e5%8d%95%e5%ae%9e%e7%94%a8%e7%9a%84%e5%89%8d%e5%90%8e%e7%ab%af%e5%88%86%e7%a6%bb%e9%a1%b9%e7%9b%ae-%e4%bb%93%e5%ba%93%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f%ef%bc%88springbo-2","status":"publish","type":"post","link":"https:\/\/eve2333.top\/?p=735","title":{"rendered":"\u975e\u5e38\u7b80\u5355\u5b9e\u7528\u7684\u524d\u540e\u7aef\u5206\u79bb\u9879\u76ee-\u4ed3\u5e93\u7ba1\u7406\u7cfb\u7edf\uff08Springboot+Vue\uff09part 2"},"content":{"rendered":"\n

\u200b<\/p>\n\n\n\n

 \u4e03\u3001\u521b\u5efa\u524d\u7aef\u9879\u76ee<\/h1>\n\n\n\n

\u00a0 \u4f60\u4e0b\u8f7d\u4e86nodejs\u5417\uff1f\u4ececn\u5b98\u7f51\u4e0b\u8f7d\uff1ahttp:\/\/nodejs.cn\/download\/\uff0c\u6216\u8005\u4ece\u4e00\u4e2a\u56fd\u5916org\u7f51\u7ad9\u4e0b\u8f7d\uff0c\u9009\u62e9\u81ea\u5df1\u60f3\u8981\u7684\u7248\u672chttps:\/\/nodejs.org\/download\/release\/\uff0c\u53cc\u51fb\u4e0b\u8f7d\u597d\u7684\u5b89\u88c5\u6587\u4ef6\uff0c\u9009\u62e9\u5b89\u88c5\u8def\u5f84\u5b89\u88c5\u597d\u5373\u53ef\u3002\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u8f93\u5165\u547d\u4ee4\u67e5\u770b\u7248\u672c\uff0cmac\u9996\u6b21\u5b89\u88c5\u90fd\u65e0\u9700\u914d\u7f6e\u73af\u5883\u53d8\u91cf\u3002
\"\"<\/p>\n\n\n\n

\"\"
\u6839\u636e\u4ee5\u4e0a\u547d\u4ee4\u67e5\u770b\u914d\u7f6e\u4fe1\u606f\uff0c\u5148\u5728\u8bbe\u7f6e\u8def\u5f84\u76ee\u5f55\u4e0b\u65b0\u5efa\u4e24\u4e2a\u6587\u4ef6\u5939(eg\uff1anode_global\u548cnode_cache)\uff0c\u8bbe\u7f6e\u65b0\u7684\u6587\u4ef6\u5939<\/strong><\/p>\n\n\n\n

PS D: \\nodejs> npm config set prefix \"D: \\nodejs\\node_global\" \nPS D: \\nodejs> npm config set cache \"D: \\nodejs\\node_cache\" \nPS D: \\nodejs> npm get registry \nhttps: \/\/registry.npmjs.org\/\nPS D: \\nodejs> npm config set registry https:\/\/mirrors.cloud.tencent.com\/npm\/ \n<\/code><\/pre>\n\n\n\n
 \u7ba1\u7406\u5458\u6a21\u5f0f\u4e0b\u8f7dvue\u811a\u624b\u67b6\uff0c\u7406\u8bba\u4e0a\u4f60\u5e94\u8be5\u4e0b\u8f7d\u8fc7\u4e86<\/p>\n\n\n\n
npm install -g @vue\/cli\n<\/code><\/pre>\n\n\n\n
\u5728cmd\u4e2d\u521b\u5efavue\u9879\u76ee  vue create vuedemo1 \uff0cpowershell\u4e2d\u53c2\u89c1\u4e0b\u65b9\u7f51\u9875<\/strong><\/p>\n\n\n\n
\u201cvue : \u65e0\u6cd5\u52a0\u8f7d\u6587\u4ef6 D:\\nodejs\\node_global\\vue.ps1\uff0c\u56e0\u4e3a\u5728\u6b64\u7cfb\u7edf\u4e0a\u7981\u6b62\u8fd0\u884c\u811a\u672c\u201d\u7684\u89e3\u51b3\u65b9\u6cd5-CSDN\u535a\u5ba2<\/a><\/p>\n\n\n\n
 \u7528\u4e0a\u4e0b\u65b9\u5411\u952e\u79fb\u52a8\uff0c\u7136\u540e\u56de\u8f66\uff0c\u6211\u9009\u62e9Vue2<\/strong>\uff0c\u7b49\u5f85\u521b\u5efa\u5b8c\u6210<\/p>\n\n\n\n
\u6267\u884c\u542f\u52a8\u9879\u76ee\u547d\u4ee4\uff08\u6ce8\u610f\u8981\u5148\u8fdb\u5165\u9879\u76ee\u76ee\u5f55\uff09<\/p>\n\n\n\n
\n
cd vuedemo1
npm run serve<\/p>\n<\/blockquote>\n\n\n\n
\"\"<\/figure>\n\n\n\n
 \u73b0\u5728cd\u5728desktop\uff0cvue create wms-web\uff0c\u9009\u62e9vue2\uff0cTake A While......<\/p>\n\n\n\n
\"\"\u200b<\/p>\n\n\n\n
 cd\u8fdb\u5165\uff0cnpm run serve\u6210\u529f\u542f\u52a8vue\u811a\u624b\u67b6\uff0clocalhost:8080<\/p>\n\n\n\n
\u516b\u3001\u524d\u7aef\u9879\u76ee\u5bfc\u5230idea\u4e2d\u8fd0\u884c<\/h1>\n\n\n\n
\u628awms-web\u590d\u5236\u5230springboot_vue_wms\u4e2d,\u5728idea\u6253\u5f00\u9879\u76ee,\u4f60\u8981\u662f\u8db3\u591fnb\u7528webstrom\u53bb\u5427
\u4e3a\u4e86\u8282\u7ea6\u65f6\u95f4,\u4e0d\u7528cmd\u4e00\u6761\u6162\u6162\u8f93\u5165\u547d\u4ee4,\u53ef\u4ee5\u9009\u62e9\u5c0f\u7eff\u4e09\u89d2\u7684''\u7f16\u8bd1\u914d\u7f6e''<\/p>\n\n\n\n
\"\"<\/p>\n\n\n\n
\u505c\u6b62\u670d\u52a1\u76f4\u63a5CTRL + C<\/strong> \u5373\u53ef<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
 \u8bb0\u5f97\u628a\u524d\u7aef\u7684git\u5220\u9664<\/p>\n\n\n\n
tmd\uff0c\u540e\u9762vue\u670d\u52a1\u5668\u9891\u9891\u62a5\u9519\uff0c\u627e\u4e86\u6211\u4e00\u4e2a\u534a\u5c0f\u65f6\uff0c\u95ee\u9898\u89e3\u51b3\u4e86\uff0c\u6211\u7684idea\u4e0d\u77e5\u9053\u4e3a\u4ec0\u4e48\u5bf9node_modules\u6587\u4ef6\u8fdb\u884c\u4e86\u6392\u9664\uff08\u53d8\u6210\u9ec4\u8272\u7684\uff09\uff0c\u53f3\u952e\u8be5\u6587\u4ef6\u540e\u5c06\u76ee\u5f55\u6807\u8bb0\u4e3a\u4e0d\u6392\u9664\u5c31\u80fd\u89e3\u51b3element\u63d0\u793a\u7684\u95ee\u9898\uff0c\u8bb0\u5f97\u66f4\u65b0\u5bf9\u5e94\u7684\u672c\u5730\u7684vue\u670d\u52a1\u5668<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u4e5d\u3001\u5bfc\u5165Element-ui<\/h1>\n\n\n\n
Element - \u7f51\u7ad9\u5feb\u901f\u6210\u578b\u5de5\u5177<\/a> \u997f\u4e86\u4e48 nb<\/p>\n\n\n\n
\u6ce8\u610f\u4e86\uff0c\u8fd9\u4e2a\u5b89\u88c5\u65b9\u5f0f\u548c\u5f15\u7528\u65b9\u5f0f\u53ea\u9002\u7528\u4e8evue2\uff0cvue3\u7528\u8fd9\u4e2a\u4f1a\u62a5\u9519\uff0c\u5c31\u7b97\u5f3a\u884c\u5b89\u88c5\u4e0a\uff0c\u6700\u540e\u8fd0\u884c\u7684\u65f6\u5019\u9875\u9762\u53ea\u4f1a\u662f\u7a7a\u767d\u7684\u3002<\/p>\n\n\n\n
npm i element-ui -S\n\u62a5\u9519\u53ef\u80fd\u662f\u7248\u672c\u4e0d\u5339\u914d\uff0c \u8bd5\u8bd5npm install element-plus --save\nnpm install --legacy-peer-deps element-ui --save\u4e5f\u884c<\/code><\/pre>\n\n\n\n
\u6253\u5f00\u5bf9\u5e94\u7684\u6587\u4ef6\u7ba1\u7406\u5668\uff0c\u53d1\u73b0\u5b89\u88c5\u6210\u529f\"\"<\/p>\n\n\n\n
 \u597d\u4e86\uff0c\u73b0\u5728\u662fVUE\u65f6\u95f4\uff01<\/p>\n\n\n\n
\u8bb0\u5f97\u628amain.js\u5fc5\u8981\u7684\u4fee\u6539<\/p>\n\n\n\n
import Vue from 'vue'\nimport App from '.\/App.vue'\nimport ElementUI from 'element-ui';\nimport 'element-ui\/lib\/theme-chalk\/index.css';\n\nVue.config.productionTip = false\nVue.use(ElementUI)\nnew Vue({\n    render: h => h(App),\n}).$mount('#app')\n<\/code><\/pre>\n\n\n\n
App.vue\u5982\u4e0b<\/p>\n\n\n\n
<template>\n  <div id=\"app\">\n    <el-button type=\"primary\">BUTTON<\/el-button>\n  <\/div>\n<\/template>\n\n<script>\n\n\nexport default {\n  name: 'App',\n  components: {\n\n  }\n}\n<\/script>\n\n<style>\n\n<\/style><\/code><\/pre>\n\n\n\n
\u00a0\"\"<\/p>\n\n\n\n
\u5341\u3001\u642d\u5efa\u9875\u9762\u5e03\u5c40<\/h1>\n\n\n\n
 \u96be\u9053\u4e0d\u7528router\u5417<\/p>\n\n\n\n
\u65b0\u5efaIndexPage.vue\u6587\u4ef6\uff0c(\u540e\u9762\u4f60\u4f1a\u547d\u540d\u4e3aindex\uff0c\u8fd9\u91ccindex\u62a5\u9519\u662f\u56e0\u4e3a\u89c4\u8303\u662f\u7ec4\u4ef6\u540d\u5e94\u8be5\u662f\u591a\u4e2a\u5355\u8bcd\u7ec4\u6210\u7684\uff0c\u800c\u4e0d\u662f\u5355\u4e2a\u5355\u8bcd\u3002\u53ef\u4ee5\u8003\u8651IndexPage\u6216\u8005\u5176\u4ed6\u7684\u591a\u8bcd\u547d\u540d.  \u5b9e\u5728\u8bf4\u592a\u591a\u4e0d\u597d\u5f04\u7684 , \u5bfc\u5165\u4e4b\u540e\u62a5\u9519\u7684\u5728vue.config\u4e2d\u914d\u7f6elintOnSave: false<\/strong> \/\/@8 \u7248\u672c\u4e2d\u65b0\u589e\u4e86\u8981\u6c42\u7ec4\u4ef6\u540d\u79f0\u4ee5\u9a7c\u5cf0\u683c\u5f0f\u547d\u540d<\/p>\n\n\n\n
<template>\n  <el-container style=\"height: 500px; border: 1px solid #eee\">\n    <el-aside width=\"200px\" style=\"background-color: rgb(238, 241, 246)\">\n      <el-menu :default-openeds=\"['1', '3']\">\n        <el-submenu index=\"1\">\n          <template slot=\"title\"><i class=\"el-icon-message\"><\/i>\u5bfc\u822a\u4e00<\/template>\n          <el-menu-item-group>\n            <template slot=\"title\">\u5206\u7ec4\u4e00<\/template>\n            <el-menu-item index=\"1-1\">\u9009\u98791<\/el-menu-item>\n            <el-menu-item index=\"1-2\">\u9009\u98792<\/el-menu-item>\n          <\/el-menu-item-group>\n          <el-menu-item-group title=\"\u5206\u7ec42\">\n            <el-menu-item index=\"1-3\">\u9009\u98793<\/el-menu-item>\n          <\/el-menu-item-group>\n          <el-submenu index=\"1-4\">\n            <template slot=\"title\">\u9009\u98794<\/template>\n            <el-menu-item index=\"1-4-1\">\u9009\u98794-1<\/el-menu-item>\n          <\/el-submenu>\n        <\/el-submenu>\n        <el-submenu index=\"2\">\n          <template slot=\"title\"><i class=\"el-icon-menu\"><\/i>\u5bfc\u822a\u4e8c<\/template>\n          <el-menu-item-group>\n            <template slot=\"title\">\u5206\u7ec4\u4e00<\/template>\n            <el-menu-item index=\"2-1\">\u9009\u98791<\/el-menu-item>\n            <el-menu-item index=\"2-2\">\u9009\u98792<\/el-menu-item>\n          <\/el-menu-item-group>\n          <el-menu-item-group title=\"\u5206\u7ec42\">\n            <el-menu-item index=\"2-3\">\u9009\u98793<\/el-menu-item>\n          <\/el-menu-item-group>\n          <el-submenu index=\"2-4\">\n            <template slot=\"title\">\u9009\u98794<\/template>\n            <el-menu-item index=\"2-4-1\">\u9009\u98794-1<\/el-menu-item>\n          <\/el-submenu>\n        <\/el-submenu>\n        <el-submenu index=\"3\">\n          <template slot=\"title\"><i class=\"el-icon-setting\"><\/i>\u5bfc\u822a\u4e09<\/template>\n          <el-menu-item-group>\n            <template slot=\"title\">\u5206\u7ec4\u4e00<\/template>\n            <el-menu-item index=\"3-1\">\u9009\u98791<\/el-menu-item>\n            <el-menu-item index=\"3-2\">\u9009\u98792<\/el-menu-item>\n          <\/el-menu-item-group>\n          <el-menu-item-group title=\"\u5206\u7ec42\">\n            <el-menu-item index=\"3-3\">\u9009\u98793<\/el-menu-item>\n          <\/el-menu-item-group>\n          <el-submenu index=\"3-4\">\n            <template slot=\"title\">\u9009\u98794<\/template>\n            <el-menu-item index=\"3-4-1\">\u9009\u98794-1<\/el-menu-item>\n          <\/el-submenu>\n        <\/el-submenu>\n      <\/el-menu>\n    <\/el-aside>\n\n    <el-container>\n      <el-header style=\"text-align: right; font-size: 12px\">\n        <el-dropdown>\n          <i class=\"el-icon-setting\" style=\"margin-right: 15px\"><\/i>\n          <el-dropdown-menu slot=\"dropdown\">\n            <el-dropdown-item>\u67e5\u770b<\/el-dropdown-item>\n            <el-dropdown-item>\u65b0\u589e<\/el-dropdown-item>\n            <el-dropdown-item>\u5220\u9664<\/el-dropdown-item>\n          <\/el-dropdown-menu>\n        <\/el-dropdown>\n        <span>\u738b\u5c0f\u864e<\/span>\n      <\/el-header>\n\n      <el-main>\n        <el-table :data=\"tableData\">\n          <el-table-column prop=\"date\" label=\"\u65e5\u671f\" width=\"140\">\n          <\/el-table-column>\n          <el-table-column prop=\"name\" label=\"\u59d3\u540d\" width=\"120\">\n          <\/el-table-column>\n          <el-table-column prop=\"address\" label=\"\u5730\u5740\">\n          <\/el-table-column>\n        <\/el-table>\n      <\/el-main>\n    <\/el-container>\n  <\/el-container>\n\n<\/template>\n\n<style scoped>\n.el-header {\n  background-color: #B3C0D1;\n  color: #333;\n  line-height: 60px;\n}\n\n.el-aside {\n  color: #333;\n}\n<\/style>\n\n<script>\nexport default {\n  name:\"IndexPage\",\n  data() {\n    const item = {\n      date: '2016-05-02',\n      name: '\u738b\u5c0f\u864e',\n      address: '\u4e0a\u6d77\u5e02\u666e\u9640\u533a\u91d1\u6c99\u6c5f\u8def 1518 \u5f04'\n    };\n    return {\n      tableData: Array(20).fill(item)\n    }\n  }\n};\n<\/script><\/code><\/pre>\n\n\n\n
App.vue\u76f8\u5e94\u7684\u6dfb\u52a0<\/p>\n\n\n\n
<template>\n  <div id=\"app\">\n    <IndexPage><\/IndexPage>\n  <\/div>\n<\/template>\n\n<script>\n\n\nimport IndexPage from \"@\/components\/IndexPage.vue\";\n\nexport default {\n  name: 'App',\n  components: {\n    IndexPage\n  }\n}\n<\/script>\n\n<style>\n\/*\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n  *\/\n<\/style>\n<\/code><\/pre>\n\n\n\n
    \n
  1. \u00a0\u767d\u5c4f\u662f\u56e0\u4e3a\u5916\u5c42\u9700\u8981template<\/li>\n\n\n\n
  2. <\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \u6839\u636e\u4f60\u7684\u9700\u6c42\u5fae\u4fee\u4e00\u4e0b,\u6211\u5bf9\u90e8\u5206\u90e8\u4ef6\u8fdb\u884c\u4e86height:100%\u7684\u4ee3\u7801\u4fee\u6539<\/strong><\/p>\n\n\n\n
    \u5728assets\u4e0b\u65b0\u5efa\u4e00\u4e2aglobal.css\u6587\u4ef6\uff0c\u5728main.js\u4e2d\u5bfc\u5165   import '.\/assets\/global.css'<\/p>\n\n\n\n
    *{\n    margin:0;\n    padding: 0;\n}<\/code><\/pre>\n\n\n\n
    \u5728IndexPage\u4e2dstyle\u6dfb\u52a0 <\/p>\n\n\n\n
    .el-main{\n  padding:5px;\n}\n<\/pre>\n\n\n\n
    \u5341\u4e00\u3001\u9875\u9762\u5e03\u5c40\u7684\u62c6\u5206<\/h1>\n\n\n\n
     \u539f\u9875\u9762\u592a\u957f\u4e86\uff0c\u5728components\u4e2d\u65b0\u5efa\u51e0\u4e2a\u754c\u9762AppAside.vue\uff0cAppHeader.vue\uff0cIndexPage.vue\uff0cAppMain.vue<\/p>\n\n\n\n
    AppAside\u662f\u5c06menu\u90e8\u5206\u526a\u5207\u5230template\u4e2d\uff1b\u5c06dropdown\u4e2d\uff0c\u7ed9\u5230AppHeader\uff1btable\u590d\u5236\u5230Appmain\uff08 \u5176\u5b9e\u662f\u60f3\u6539\u6210MainComponent\u7684                     \u4e0b\u9762\u662fIndexPage.vue<\/p>\n\n\n\n
    <template>\n  <el-container style=\"height: 100%; border: 1px solid #eee\">\n    <el-aside width=\"200px\" style=\"background-color: rgb(238, 241, 246);height: 100%;\">\n      <Aside><\/Aside>\n    <\/el-aside>\n\n    <el-container style=\"height: 100%\">\n      <el-header style=\"text-align: right; font-size: 12px\">\n        <Header><\/Header>\n        <span>\u738b\u5c0f\u864e<\/span>\n      <\/el-header>\n\n      <el-main style=\"height: 100%\">\n        <Main><\/Main>\n      <\/el-main>\n    <\/el-container>\n  <\/el-container>\n\n<\/template>\n\n<style scoped>\n.el-header {\n  background-color: #B3C0D1;\n  color: #333;\n  line-height: 60px;\n}\n\n.el-main {\n  padding: 5px;\n}\n\n.el-aside {\n  color: #333;\n}\n<\/style>\n\n<script>\nimport Aside from \"@\/components\/Aside.vue\";\nimport Header from \"@\/components\/Header.vue\";\nimport Main from \"@\/components\/Main.vue\";\n\nexport default {\n  name: \"Index\",\n  components: {Main, Aside, Header},\n\n};\n<\/script><\/code><\/pre>\n\n\n\n
    <template>\n  <el-menu :default-openeds=\"['1', '3']\">\n    <el-submenu index=\"1\">\n      <template slot=\"title\"><i class=\"el-icon-message\"><\/i>\u5bfc\u822a\u4e00<\/template>\n      <el-menu-item-group>\n        <template slot=\"title\">\u5206\u7ec4\u4e00<\/template>\n        <el-menu-item index=\"1-1\">\u9009\u98791<\/el-menu-item>\n        <el-menu-item index=\"1-2\">\u9009\u98792<\/el-menu-item>\n      <\/el-menu-item-group>\n      <el-menu-item-group title=\"\u5206\u7ec42\">\n        <el-menu-item index=\"1-3\">\u9009\u98793<\/el-menu-item>\n      <\/el-menu-item-group>\n      <el-submenu index=\"1-4\">\n        <template slot=\"title\">\u9009\u98794<\/template>\n        <el-menu-item index=\"1-4-1\">\u9009\u98794-1<\/el-menu-item>\n      <\/el-submenu>\n    <\/el-submenu>\n    <el-submenu index=\"2\">\n      <template slot=\"title\"><i class=\"el-icon-menu\"><\/i>\u5bfc\u822a\u4e8c<\/template>\n      <el-menu-item-group>\n        <template slot=\"title\">\u5206\u7ec4\u4e00<\/template>\n        <el-menu-item index=\"2-1\">\u9009\u98791<\/el-menu-item>\n        <el-menu-item index=\"2-2\">\u9009\u98792<\/el-menu-item>\n      <\/el-menu-item-group>\n      <el-menu-item-group title=\"\u5206\u7ec42\">\n        <el-menu-item index=\"2-3\">\u9009\u98793<\/el-menu-item>\n      <\/el-menu-item-group>\n      <el-submenu index=\"2-4\">\n        <template slot=\"title\">\u9009\u98794<\/template>\n        <el-menu-item index=\"2-4-1\">\u9009\u98794-1<\/el-menu-item>\n      <\/el-submenu>\n    <\/el-submenu>\n    <el-submenu index=\"3\">\n      <template slot=\"title\"><i class=\"el-icon-setting\"><\/i>\u5bfc\u822a\u4e09<\/template>\n      <el-menu-item-group>\n        <template slot=\"title\">\u5206\u7ec4\u4e00<\/template>\n        <el-menu-item index=\"3-1\">\u9009\u98791<\/el-menu-item>\n        <el-menu-item index=\"3-2\">\u9009\u98792<\/el-menu-item>\n      <\/el-menu-item-group>\n      <el-menu-item-group title=\"\u5206\u7ec42\">\n        <el-menu-item index=\"3-3\">\u9009\u98793<\/el-menu-item>\n      <\/el-menu-item-group>\n      <el-submenu index=\"3-4\">\n        <template slot=\"title\">\u9009\u98794<\/template>\n        <el-menu-item index=\"3-4-1\">\u9009\u98794-1<\/el-menu-item>\n      <\/el-submenu>\n    <\/el-submenu>\n  <\/el-menu>\n<\/template>\n\n<style scoped>\n\n<\/style>\n<script>\nexport default {\n  name:\"Aside\"\n}\n<\/script><\/code><\/pre>\n\n\n\n
    <template>\n  <div>\n  <el-dropdown>\n    <i class=\"el-icon-setting\" style=\"margin-right: 15px\"><\/i>\n    <el-dropdown-menu slot=\"dropdown\">\n      <el-dropdown-item>\u67e5\u770b<\/el-dropdown-item>\n      <el-dropdown-item>\u65b0\u589e<\/el-dropdown-item>\n      <el-dropdown-item>\u5220\u9664<\/el-dropdown-item>\n    <\/el-dropdown-menu>\n  <\/el-dropdown>\n\n  <\/div>\n<\/template>\n\n<style scoped>\n\n<\/style>\n<script>\nexport default {\n  name:\"Header\"\n}\n<\/script><\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    <template>\n  <el-table :data=\"tableData\">\n    <el-table-column prop=\"date\" label=\"\u65e5\u671f\" width=\"140\">\n    <\/el-table-column>\n    <el-table-column prop=\"name\" label=\"\u59d3\u540d\" width=\"120\">\n    <\/el-table-column>\n    <el-table-column prop=\"address\" label=\"\u5730\u5740\">\n    <\/el-table-column>\n  <\/el-table>\n<\/template>\n\n<style scoped>\n\n<\/style>\n<script>\nexport default{\n  name:\"Main\",\n  data() {\n    const item = {\n      date: '2016-05-02',\n      name: '\u738b\u5c0f\u864e',\n      address: '\u4e0a\u6d77\u5e02\u666e\u9640\u533a\u91d1\u6c99\u6c5f\u8def 1518 \u5f04'\n    };\n    return {\n      tableData: Array(20).fill(item)\n    }\n  }\n}\n\n<\/script>\n<\/code><\/pre>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \u5982\u679c\u6709\u5305\u7248\u672c\u7684\u51b2\u7a81\uff0cnpm install --legacy-peer-deps <\/p>\n\n\n\n
    \u5341\u4e8c\u3001\u7f16\u5199Header\u5934\u9875\u9762<\/h1>\n\n\n\n
    1.dropdown\u4e0b\u62c9<\/p>\n\n\n\n
    @click\u548c@click.native\u6709\u4ec0\u4e48\u533a\u522b\uff0c\u5982\u4f55\u963b\u6b62\u7b2c\u4e09\u65b9\u7ec4\u4ef6\u5185\u90e8\u7684\u5192\u6ce1\u4e00.@click\u548c@click.nati - \u6398\u91d1<\/a><\/p>\n\n\n\n
    \u8fd9\u662f\u4e00\u7bc7\u6587\u7ae0\u5728vue3\u7684\u90e8\u5206\u540c\u5b66\u4eec\uff0c\u53ef\u80fd\u5bf9native\u7684\u9009\u62e9\u6709\u5e2e\u52a9<\/p>\n\n\n\n
     AppHeader.vue<\/p>\n\n\n\n
    <template>\n  <div style=\"display:flex;line-height:60px;\">\n    <div>\n      <i class=\"el-icon-s-fold\" style=\"font-size:20px;vertical-align: middle;\"><\/i>\n    <\/div>\n    <div style=\"flex:1;text-align:center;font-size:27px;\">\n      <span>\u6b22\u8fce\u6765\u5230\u4ed3\u5e93\u7ba1\u7406\u7cfb\u7edf<\/span>\n    <\/div>\n    <span>\u738b\u5c0f\u864e<\/span>\n    <el-dropdown trigger=\"click\">\n      <i class=\"el-icon-arrow-down\" style=\"margin-left:5px;\"><\/i>\n      <el-dropdown-menu slot=\"dropdown\"><!--\u76f4\u63a5\u7ed9\u56fe\u6807\u52a0line-height:60px\u5c31\u5c45\u4e2d\u4e86;\u52a0\u4e0aheight\u548cline-height\uff0c\u8ba9\u4ed6\u4eec\u76f8\u7b49\u5c31\u53ef\u4ee5\u8ba9\u6587\u672c\u5782\u76f4\u5c45\u4e2d;\u52a0\u5782\u76f4vertical-align: middle;\u5e94\u8be5\u5c31\u597d\u4e86-->\n        <el-dropdown-item @click.native=\"toUser\">\u4e2a\u4eba\u4e2d\u5fc3<\/el-dropdown-item>\n        <el-dropdown-item @click.native=\"logout\">\u9000\u51fa\u767b\u5f55<\/el-dropdown-item>\n      <\/el-dropdown-menu>\n    <\/el-dropdown>\n  <\/div>\n<\/template>\n\n<style scoped>\n\n<\/style>\n<script>\n  export default{\n    name:\"AppHeader\",\n    methods:{\n      toUser() {\n        console.log('to_user')\n      },\n      logout(){\n        console.log('logout')\n      },\n    }\n  }\n<\/script><\/code><\/pre>\n\n\n\n
     IndexPage.vue\u90e8\u5206<\/p>\n\n\n\n
    <el-container style=\"height: 100%; border: 1px solid #eee\">\n    <el-aside width=\"200px\" style=\"background-color: rgb(238, 241, 246);height: 100%\">\n      <AppAside><\/AppAside>\n    <\/el-aside><\/code><\/pre>\n\n\n\n
    2.\u83dc\u5355\u4f38\u7f29\u56fe\u6807<\/p>\n\n\n\n
    \u539f\u5148\u7684\u592a\u591a\u4e86\uff0c\u4e0d\u7b26\u5408\u9879\u76ee\u7684\u8981\u6c42\uff0c<\/p>\n\n\n\n
    \u8fd9\u91cc\u662f\u56e0\u4e3a\u8bbe\u7f6e\u4e861px\u7684border<\/p>\n\n\n\n
    3.\u6b22\u8fce\u5b57\u6837<\/p>\n\n\n\n
    4.\u53bb\u9664\u80cc\u666f\uff0c\u52a0\u5165\u4e0b\u8fb9\u6846<\/p>\n\n\n\n
    \u5341\u4e09\u3001\u83dc\u5355\u5bfc\u822a\u9875\u9762\u7f16\u5199<\/h1>\n\n\n\n
    \u4e00\u7ea7\u83dc\u5355\uff0cAppHeader.vue<\/p>\n\n\n\n
    <template>\n  <div style=\"display:flex;line-height:60px;\">\n    <div>\n      <i class=\"el-icon-s-fold\" style=\"font-size:20px;vertical-align: middle;\"><\/i>\n    <\/div>\n    <div style=\"flex:1;text-align:center;font-size:27px;\">\n      <span>\u6b22\u8fce\u6765\u5230\u4ed3\u5e93\u7ba1\u7406\u7cfb\u7edf<\/span>\n    <\/div>\n    <span>\u738b\u5c0f\u864e<\/span>\n    <el-dropdown trigger=\"click\">\n      <i class=\"el-icon-arrow-down\" style=\"margin-left:5px;\"><\/i>\n      <el-dropdown-menu slot=\"dropdown\"><!--\u76f4\u63a5\u7ed9\u56fe\u6807\u52a0line-height:60px\u5c31\u5c45\u4e2d\u4e86;\u52a0\u4e0aheight\u548cline-height\uff0c\u8ba9\u4ed6\u4eec\u76f8\u7b49\u5c31\u53ef\u4ee5\u8ba9\u6587\u672c\u5782\u76f4\u5c45\u4e2d;\u52a0\u5782\u76f4vertical-align: middle;\u5e94\u8be5\u5c31\u597d\u4e86-->\n        <el-dropdown-item @click.native=\"toUser\">\u4e2a\u4eba\u4e2d\u5fc3<\/el-dropdown-item>\n        <el-dropdown-item @click.native=\"logout\">\u9000\u51fa\u767b\u5f55<\/el-dropdown-item>\n      <\/el-dropdown-menu>\n    <\/el-dropdown>\n  <\/div>\n<\/template>\n\n<style scoped>\n\n<\/style>\n<script>\n  export default{\n    name:\"AppHeader\",\n    methods:{\n      toUser() {\n        console.log('to_user')\n      },\n      logout(){\n        console.log('logout')\n      },\n    }\n  }\n<\/script><\/code><\/pre>\n\n\n\n
    \u5efa\u8bae\u76f4\u63a5\u770b\u4e0b\u4e00\u7bc7 <\/p>\n\n\n\n
    \u5341\u56db\u3001\u83dc\u5355\u5bfc\u822a\u9875\u9762\u4f38\u7f29<\/h1>\n\n\n\n
    \u4f38\u7f29\u7684\u601d\u8def\uff1a\u56fe\u6807\u548c\u6587\u5b57\uff0c\u6536\u8d77\u548c\u5c55\u5f00\u662f\u6709\u53d8\u91cf\u7684\uff0c\u6839\u636eelement\u7684\u5b98\u65b9\u6587\u6863\uff0c\u5bf9aside\u4fee\u6539<\/p>\n\n\n\n
    \"\"<\/p>\n\n\n\n
    \u4e24\u76f8\u5bf9\u6bd4\uff0c\u53d1\u73b0\u52a8\u753b\u4e0d\u592a\u6d41\u7545\u5f71\u54cd\u89c2\u611f \u3002<\/p>\n\n\n\n
     \u5e76\u4e14header\u7684\u9009\u9879\uff0c\u628a\u4fe1\u53f7\u8de8\u7ec4\u4ef6\u7ed9\u5230aside\uff0c\u53ef\u4ee5\u56de\u53bb\u770b\u770bvue\u7684\u591a\u79cd\u8de8\u7ec4\u4ef6\u65b9\u6cd5\u5417\uff1fVue\u8de8\u7ec4\u4ef6\u901a\u4fe18\u79cd\u65b9\u5f0f\u6c47\u603b<\/a>
     \u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u5168\u5c40\u4e8b\u4ef6\u603b\u7ebf\u5feb\u5f88\u591a\uff0c\u8fd9\u91cc\u63d0\u4f9b\u4e00\u4e2a\u4e0d\u592a\u597d\u7684\u65b9\u6cd5\uff08\u5f88\u5361\uff09<\/strong>\uff1aheader\u70b9\u51fb\u56fe\u6807---\u63d0\u4ea4--->\u7236\u7ec4\u4ef6--\u6539\u53d8-->aside\u5b50\u7ec4\u4ef6\uff08collapse\uff09<\/p>\n\n\n\n
    IndexPage.vue<\/p>\n\n\n\n
    <template>\n  <el-container style=\"height: 100%; border: 1px solid #eee\">\n    <el-aside :width=\"aside_width\" style=\"background-color: rgb(238, 241, 246);height: 100% ;margin-left:-1px\">\n      <AppAside :isCollapse=\"isCollapse\"><\/AppAside>\n    <\/el-aside>\n\n    <el-container style=\"height: 100%\">\n      <el-header style=\"text-align: right; font-size: 12px ;height:100%;border-bottom: rgba(168,168,168,0.3) 1px solid\">\n          <AppHeader @doCollapse=\"doCollapse\" :icon=\"icon\"><\/AppHeader>\n      <\/el-header>\n\n      <el-main style=\"height: 100%\">\n        <AppMain><\/AppMain>\n      <\/el-main>\n    <\/el-container>\n  <\/el-container>\n\n<\/template>\n\n<style scoped>\n.el-header {\n  \/*background-color:#B3C0D1;*\/\n  color: #333;\n  line-height: 60px;\n}\n.el-main{\n  padding:5px;\n}\n.el-aside {\n  color: #333;\n}\n<\/style>\n\n<script>\nimport AppAside from \"@\/components\/AppAside.vue\";\nimport AppHeader from \"@\/components\/AppHeader.vue\";\nimport AppMain from \"@\/components\/AppMain.vue\";\nimport appAside from \"@\/components\/AppAside.vue\";\n\nexport default {\n  name:\"IndexPage\",\n  computed: {\n    appAside() {\n      return appAside\n    }\n  },\n  components: {AppMain, AppHeader, AppAside},\n  data(){\n    return {\n      isCollapse:false,\n      aside_width:'200px',\n      icon:'el-icon-s-fold'\n    }\n  },\n  methods:{\n    doCollapse(){\n      console.log(11111)\n      this.isCollapse =!this.isCollapse\n      if(!this.isCollapse){\/\/\u9ed8\u8ba4\u5c55\u5f00,\u4f60\u60f3\u5199\u4e09\u76ee\u4e5f\u884c this.isCollapse ===true?this.changeWidth=\"64px\":this.changeWidth=\"200px\"\n        this.aside_width='200px'\n        this.icon='el-icon-s-fold'\n      }else{\n        this.aside_width='62px'\n        this.icon='el-icon-s-unfold'\n      }\n    }\n  }\n};\n<\/script><\/code><\/pre>\n\n\n\n
    AppHeader.vue<\/p>\n\n\n\n
    <template>\n  <div style=\"display:flex;line-height:60px;\">\n    <div  style=\"cursor:pointer;\">\n      <i :class=\"icon\" style=\"font-size:20px;vertical-align: middle;\" @click=\"collapse\"><\/i>\n    <\/div>\n    <div style=\"flex:1;text-align:center;font-size:27px;\">\n      <span>\u6b22\u8fce\u6765\u5230\u4ed3\u5e93\u7ba1\u7406\u7cfb\u7edf<\/span>\n    <\/div>\n    <span>\u738b\u5c0f\u864e<\/span>\n    <el-dropdown trigger=\"click\">\n      <i class=\"el-icon-arrow-down\" style=\"margin-left:5px;\"><\/i>\n      <el-dropdown-menu slot=\"dropdown\"><!--\u76f4\u63a5\u7ed9\u56fe\u6807\u52a0line-height:60px\u5c31\u5c45\u4e2d\u4e86;\u52a0\u4e0aheight\u548cline-height\uff0c\u8ba9\u4ed6\u4eec\u76f8\u7b49\u5c31\u53ef\u4ee5\u8ba9\u6587\u672c\u5782\u76f4\u5c45\u4e2d;\u52a0\u5782\u76f4vertical-align: middle;\u5e94\u8be5\u5c31\u597d\u4e86-->\n        <el-dropdown-item @click.native=\"toUser\">\u4e2a\u4eba\u4e2d\u5fc3<\/el-dropdown-item>\n        <el-dropdown-item @click.native=\"logout\">\u9000\u51fa\u767b\u5f55<\/el-dropdown-item>\n      <\/el-dropdown-menu>\n    <\/el-dropdown>\n  <\/div>\n<\/template>\n\n<style scoped>\n\n<\/style>\n<script>\n\n\n  export default{\n    name:\"AppHeader\",\n  props:{\n      icon:String\n  },\n    methods:{\n      toUser() {\n        console.log('to_user')\n      },\n      logout(){\n        console.log('logout')\n      },\n      collapse(){\n        this.$emit('doCollapse')\n      }\n\n    }\n  }\n<\/script><\/code><\/pre>\n\n\n\n
    AppAside.vue<\/p>\n\n\n\n
    <template>\n  <el-menu\n    background-color=\"#545c64\"\n    text-color=\"#fff\"\n    active-text-color=\"#ffd04b\"\n    style=\"height:100vh;\"\n    default-active=\"\/Home\"\n    :collapse=\"isCollapse\"\n    :collapse-transition=\"false\">\n\n    <el-menu-item index=\"\/One\">\n    <i class=\"el-icon-s-home\"><\/i>\n    <span slot=\"title\">\u9996\u9875<\/span>\n    <\/el-menu-item>\n\n    <el-menu-item index=\"\/Two\">\n      <i class=\"el-icon-s-flag\"><\/i>\n      <span slot=\"title\">\u5bfc\u822a\u4e00<\/span>\n    <\/el-menu-item>\n\n    <el-menu-item index=\"\/Home\">\n      <i class=\"el-icon-s-opportunity\"><\/i>\n      <span slot=\"title\">\u5bfc\u822a\u4e8c<\/span>\n    <\/el-menu-item>\n  <\/el-menu>\n<\/template>\n\n<style scoped>\n\n<\/style>\n<script>\n  export default{\n    name:\"AppAside\",\n    data(){\n      return{\n       \/\/ isCollapse:false\n      }\n    },\n    props:{\n      isCollapse:Boolean\n    }\n  }\n<\/script><\/code><\/pre>\n\n\n\n
    \u5341\u4e94\u3001axios\u7684\u5b89\u88c5\u548c\u5904\u7406\u8de8\u57df<\/h1>\n\n\n\n
     1.\u5b89\u88c5axios
    npm install axios --save<\/p>\n\n\n\n
    \u5728main.js\u5168\u5c40\u5f15\u5165axios<\/p>\n\n\n\n
    import axios from \"axios\";\nVue.prototype.$axios =axios;<\/code><\/pre>\n\n\n\n
    \u8de8\u57df\uff1a\u89e3\u51b3SpringBoot\u8de8\u57df\u95ee\u98988\u79cd\u65b9\u6cd5\uff0c\u542b\u7f51\u5173\u3001-CSDN\u535a\u5ba2<\/a>SpringBoot\u89e3\u51b3\u8de8\u57df\u76845\u79cd\u65b9\u5f0f_springboot\u8de8\u57df-CSDN\u535a\u5ba2<\/a><\/p>\n\n\n\n
    package com.wms.common;\n\nimport org.springframework.context.annotation.Configuration;\nimport org.springframework.web.servlet.config.annotation.CorsRegistry;\nimport org.springframework.web.servlet.config.annotation.WebMvcConfigurer;\n\n@Configuration\npublic class CorsConfig implements WebMvcConfigurer{\n\n    @override\n    public void addCorsMappings(CorsRegistry registry\uff09{\n        registry.addMapping(\"\/**\")\n            \/\/\u662f\u5426\u53d1\u9001Cookie\n            .allowCredentials(true)\n            \/\/\u653e\u884c\u54ea\u4e9b\u539f\u59cb\u57df\n            .aliowedOriginPatterns(\"*\")\n            .allowedMethods(new String[]{\"GET\"\uff0c\"POST\"\uff0c\"PUT\"\uff0c\"DELETE\"})\n            .allowedHeaders(\"*\")\n            .exposedHeaders(\"*\");\n    }\n}<\/code><\/pre>\n\n\n\n
    get\u4f7f\u7528        \u8fd9\u4e2aget\u524d\u7aef\u5199\u6cd5\u5df2\u7ecf\u8fc7\u65f6\u4e86<\/p>\n\n\n\n
    this.$axios.get('http:\/\/localhost:8090\/1ist').then(res=>{\n    console.log(res)\n })<\/code><\/pre>\n\n\n\n
    post\u4f7f\u7528\uff0cF12\u5982\u4e0b\u56fe\u6240\u793a<\/p>\n\n\n\n
    this.$axios.post('http:\/\/localhost:8091\/user\/1istP',()).then(res=>{\nconsole.log(res)\n})<\/code><\/pre>\n\n\n\n
    \u5c06\u5730\u5740\u8bbe\u7f6e\u4e3a\u5168\u5c40,\u8bb0\u5f97\u5f00mysql\uff01\uff01\uff01\uff01\uff01\uff01\uff01\uff01\uff01\uff01\uff01\uff01\u554a\u554a\u554a\u554a\u554a\u554a<\/strong><\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \u5b9e\u9645\u4e0a\uff0c\u8de8\u57df\u53ef\u4ee5\u4e00\u4e2a@CrossOrigin<\/strong>\u89e3\u51b3\uff08@CrossOrigin\u4f7f\u7528\u573a\u666f\u8981\u6c42\uff08jdk1.8+\uff0cSpring4.2+\uff09<\/p>\n\n\n\n
     \u4f46\u662f\u8bf7\u5728wms\/src\/main\/java\/com.wms\/common\u65b0\u5efaCorConfig.java<\/p>\n\n\n\n
    package com.wms.common;\n\nimport org.springframework.context.annotation.Configuration;\nimport org.springframework.web.servlet.config.annotation.CorsRegistry;\nimport org.springframework.web.servlet.config.annotation.WebMvcConfigurer;\n\n\/\/ \u6848\u4f8b \u4e00\n@Configuration\npublic class CorsConfig implements WebMvcConfigurer {\n \n    @Override\n    public void addCorsMappings(CorsRegistry registry) {\n        registry.addMapping(\"\/**\")\n                \/\/\u662f\u5426\u53d1\u9001Cookie\n                .allowCredentials(true)\n                \/\/\u653e\u884c\u54ea\u4e9b\u539f\u59cb\u57df\n                .allowedOriginPatterns(\"*\")\n                .allowedMethods(new String[]{\"GET\", \"POST\", \"PUT\", \"DELETE\"})\n                .allowedHeaders(\"*\")\n                .exposedHeaders(\"*\");\n    }\n}<\/code><\/pre>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
     AppMain\u4e2d<\/p>\n\n\n\n
    methods:{\n  loadGet(){\n    this.$axios.get('http:\/\/localhost:8090\/user\/list').then(res=>res.data).then(res=>{\n      console.log(res)\n    })\n  }\n},\nbeforeMount() {\n  this.loadGet();\n}<\/pre>\n\n\n\n
     \u8fd9\u4e2asql\u663e\u793a\u8981\u5728yml\u6587\u4ef6\u91cc\u52a0\u914d\u7f6e\uff0c\u53ef\u4ee5\u641cmybatis\u63a7\u5236\u53f0\u6253\u5370sql\u914d\u7f6e<\/s><\/p>\n\n\n\n
    \u8bf7\u5728pom\u4e2d\u6dfb\u52a0<\/p>\n\n\n\n
    <dependency>\n\t\t\t<groupId>org.apache.commons<\/groupId>\n\t\t\t<artifactId>commons-lang3<\/artifactId>\n\t\t\t<version>3.12.0<\/version> <!-- \u8bf7\u4f7f\u7528\u6700\u65b0\u7684\u7248\u672c\u53f7 -->\n\t\t<\/dependency><\/code><\/pre>\n\n\n\n
    \u4f60\u53ef\u4ee5\u5c06 StringUtil.isNotBlack(user.getName()) \u66ff\u6362\u4e3a StringUtils.isNotBlank(user.getName())\u3002\u8fd9\u6837\u5c31\u53ef\u4ee5\u6b63\u786e\u5730\u5224\u65ad user.getName() \u662f\u5426\u65e2\u975e null \u53c8\u4e0d\u662f\u7a7a\u767d\u5b57\u7b26\u4e32\u4e86\u3002<\/p>\n\n\n\n
     \u5728main.js\u4e2d\u6dfb\u52a0\uff0c\u4ece\u800c\u5168\u5c40\u5730\u5740<\/p>\n\n\n\n
    Vue.prototype.$httpUrl='http:\/\/localhost:8090'<\/pre>\n\n\n\n
     this.$axios.get(this.$httpUrl+'\/user\/list').then(res=>res.data).then(res=>{\u53ef\u4ee5\u628a$httpUrl\u53bb\u6389\uff0c\u53bb\u7528\u53bb\u62e6\u622a\uff1a\u8fd9\u91cc\u5c31\u4e0d\u8fd9\u4e48\u641e\u4e86\u3002<\/p>\n\n\n\n
    request.js\u53ef\u4f9b\u9009\u62e9\u4f7f\u7528\uff0c\u6211\u5c31\u4e0d\u7528\u4e86Vue\u9879\u76ee\u642d\u5efa\u5e38\u7528\u7684\u914d\u7f6e\u6587\u4ef6\uff0crequest.js\u548cvue.config.js_vue\u9879\u76ee\u642d\u5efa\u5e38\u7528\u7684\u914d\u7f6e\u6587\u4ef6,request.js\u548cvue.config.js-CSDN\u535a\u5ba2<\/a><\/p>\n\n\n\n
    \/\/ 1.\u5f15\u5165axios\n\/\/ 2.axios.create\u65b9\u6cd5\u521b\u5efa\u5b9e\u4f8b\n\/\/ 3.\u4f7f\u7528\u5b9e\u4f8b\u5bf9\u8c61\u521b\u5efa\u8bf7\u6c42\u62e6\u622a\u5668\n\/\/ 4.\u4f7f\u7528\u5b9e\u4f8b\u521b\u5efa\u54cd\u5e94\u62e6\u622a\u5668\n\/\/ 5.export\u629b\u51fa\u5b9e\u4f8b\u5bf9\u8c61\n\/\/ 6.main.js\u4e2d\u5f15\u5165request\u6587\u4ef6\u5bf9\u8c61\nimport axios from 'axios'\nimport store from '@\/store\/index'\nconst Server =axios.create({\n    baseURL:'',\n    timeout:3000\n})\n\/\/\u4f7f\u7528Server\u521b\u5efa\u8bf7\u6c42\u62e6\u622a\u5668\nServer.interceptors.request.use(function(config){\n    store.commit('setLoading',true) \/\/\u8bbe\u7f6eloading\u6548\u679c\n    return config;\n},function(error){\n    return Promise.reject(error)\n})\n\/\/\u4f7f\u7528Server\u521b\u5efa\u54cd\u5e94\u62e6\u622a\u5668\nServer.interceptors.response.use(function(response){\n    console.log(response);\n    \/\/\u5224\u65ad\u63a5\u53e3\u8fd4\u56de\u7684\u6570\u636e\u6210\u529f\uff0c\u76f4\u63a5\u8fd4\u56de\u6570\u636e\u4e2ddata\u6570\u636e\n    if(response.status == 200){\n        setTimeout(() => {\n            store.commit('setLoading',false) \/\/\u8bbe\u7f6eloading\u6548\u679c\n        }, 1000);\n        return response.data;\n    }\n    return response;\n},function(error){\n    return Promise.reject(error);\n});\nexport default Server\n<\/code><\/pre>\n\n\n\n
     UserController.java\u90e8\u5206<\/p>\n\n\n\n
    \/\/\u67e5\u8be2\uff08\u6a21\u7cca\u3001\u5339\u914d\uff09\n    @PostMapping(\"\/listP\")\n    public List<User> listP(@RequestBody User user) {\n        LambdaQueryWrapper<User> lambdaQueryWrapper = new LambdaQueryWrapper();\n        if(StringUtils.isNotBlank(user.getName())){\n            lambdaQueryWrapper.like(User::getName, user.getName());\n        }\n        \/\/lambdaQueryWrapper.like(User::getName, user.getName());\n        \/\/lambdaQueryWrapper.eq(User::getName, user.getName());\n        \/\/eq\u5c31\u662f\u5b8c\u5168\u5339\u914d\n        return userService.list(lambdaQueryWrapper);\n    }<\/code><\/pre>\n\n\n\n
    Appmain.vue\u90e8\u5206<\/p>\n\n\n\n
    <script>\n  export default{\n    name:\"AppMain\",\/*\u5176\u5b9e\u662f\u60f3\u6539\u6210MainComponent\u7684*\/\n    data() {\n\n      return {\n        tableData: Array(10).fill(item)\n      }\n    },\n    methods:{\n      loadGet(){\n        this.$axios.get(this.$httpUrl+'\/user\/list').then(res=>res.data).then(res=>{\n          console.log(res)\n        })\n      },\n      loadPost(){\n        this.$axios.post(this.$httpUrl+'\/user\/listP',{}).then(res=>res.data).then(res=>{\n          console.log(res)\n        })\n      }\n    },\n    beforeMount() {\n      this.loadGet()\n    }\n  }\n<\/script><\/code><\/pre>\n\n\n\n
    \u5341\u516d\u3001\u5217\u8868\u5c55\u793a<\/h1>\n\n\n\n
    1.\u5217\u8868\u6570\u636e
    2.\u7528tag\u8f6c\u6362\u5217
    3.header-cell-style\u8bbe\u7f6e\u8868\u5934\u6837\u5f0f
    4.\u52a0\u4e0a\u8fb9\u6846
    5.\u6309\u94ae\uff08\u7f16\u8f91\u3001\u5220\u9664\uff09
    6.\u540e\u7aef\u8fd4\u56de\u7ed3\u679c\u5c01\u88c5\uff08Result\uff09<\/p>\n\n\n\n
     AppMain.vue\u7684\u9700\u4fee\u6539<\/p>\n\n\n\n
    <template>\n  <el-table :data=\"tableData\">\n    <el-table-column prop=\"id\" label=\"ID\" width=\"60\">\n    <\/el-table-column>\n    <el-table-column prop=\"no\" label=\"\u8d26\u53f7\" width=\"120\">\n    <\/el-table-column>\n    <el-table-column prop=\"name\" label=\"\u59d3\u540d\" width=\"80\">\n    <\/el-table-column>\n    <el-table-column prop=\"age\" label=\"\u5e74\u9f84\" width=\"80\">\n    <\/el-table-column>\n    <el-table-column prop=\"sex\" label=\"\u6027\u522b\" width=\"80\">\n    <\/el-table-column>\n    <el-table-column prop=\"roleId\" label=\"\u89d2\u8272\" width=\"80\">\n    <\/el-table-column>\n    <el-table-column prop=\"phone\" label=\"\u7535\u8bdd\" width=\"120\">\n    <\/el-table-column>\n    <el-table-column prop=\"operate\" label=\"\u64cd\u4f5c\">\n    <\/el-table-column>\n  <\/el-table>\n<\/template>\n\n<style scoped>\n\n<\/style>\n\n<script>\n  export default{\n    name:\"AppMain\",\/*\u5176\u5b9e\u662f\u60f3\u6539\u6210MainComponent\u7684*\/\n    data() {\n      return {\n        tableData:[]\n      }\n    },\n    methods:{\n      loadGet(){\n        this.$axios.get(this.$httpUrl+'\/user\/list').then(res=>res.data).then(res=>{\n          console.log(res)\n        })\n      },\n      loadPost(){\n        this.$axios.post(this.$httpUrl+'\/user\/listP',{}).then(res=>res.data).then(res=>{\n          console.log(res)\n          this.tableData=res\n        })\n      }\n    },\n    beforeMount() {\n      this.loadPost()\n    }\n  }\n<\/script><\/code><\/pre>\n\n\n\n
    \u8fd9\u91cc\u6211\u8fd8\u62a5\u9519\u4e86\uff0c\u6539\u4e86loadPost\u624d\u6b63\u786e\uff0c\u8fd9\u662ftyqw\u7684\u5efa\u8bae  ( \u770b\u770b\u5c31\u597d\uff0c\u4e0d\u8981\u7167\u642c<\/strong><\/p>\n\n\n\n
    \u4ece\u4f60\u7684\u4ee3\u7801\u6765\u770b\uff0c\u95ee\u9898\u53ef\u80fd\u51fa\u5728\u4ee5\u4e0b\u51e0\u4e2a\u65b9\u9762\uff1a<\/p>\n\n\n\n
    1. **API \u8c03\u7528\u65b9\u5f0f**\uff1a\u4f60\u5728 `loadGet` \u65b9\u6cd5\u4e2d\u4f7f\u7528\u4e86 GET \u8bf7\u6c42\u6765\u83b7\u53d6\u7528\u6237\u5217\u8868\uff0c\u4f46\u5728 `loadPost` \u65b9\u6cd5\u4e2d\u4f7f\u7528\u4e86 POST \u8bf7\u6c42\u3002\u5982\u679c\u4f60\u7684\u540e\u7aef API \u9700\u8981\u901a\u8fc7 POST \u8bf7\u6c42\u6765\u83b7\u53d6\u7528\u6237\u5217\u8868\uff0c\u90a3\u4e48\u4f60\u5e94\u8be5\u53ea\u4fdd\u7559\u4e00\u4e2a\u65b9\u6cd5\uff0c\u5e76\u786e\u4fdd\u5b83\u6b63\u786e\u5730\u8c03\u7528\u4e86\u540e\u7aef\u63a5\u53e3\u3002<\/p>\n\n\n\n
    2. **\u54cd\u5e94\u5904\u7406**\uff1a\u4f60\u9700\u8981\u5c06\u540e\u7aef\u8fd4\u56de\u7684\u6570\u636e\u8d4b\u503c\u7ed9 `tableData` \u6570\u7ec4\uff0c\u4ee5\u4fbf\u5728 Vue \u7ec4\u4ef6\u4e2d\u663e\u793a\u8fd9\u4e9b\u6570\u636e\u3002\u76ee\u524d\uff0c\u4f60\u53ea\u662f\u6253\u5370\u4e86\u8fd4\u56de\u7684\u6570\u636e\uff0c\u4f46\u6ca1\u6709\u5c06\u5176\u8d4b\u503c\u7ed9 `tableData`\u3002<\/p>\n\n\n\n
    3. **\u7ec4\u4ef6\u751f\u547d\u5468\u671f\u94a9\u5b50**\uff1a\u4f60\u53ef\u4ee5\u5728 `mounted` \u751f\u547d\u5468\u671f\u94a9\u5b50\u4e2d\u8c03\u7528\u52a0\u8f7d\u6570\u636e\u7684\u65b9\u6cd5\uff0c\u800c\u4e0d\u662f\u5728 `beforeMount` \u4e2d\u3002\u8fd9\u6837\u53ef\u4ee5\u786e\u4fdd DOM \u5df2\u7ecf\u6e32\u67d3\u5b8c\u6bd5\u540e\u518d\u8fdb\u884c\u6570\u636e\u8bf7\u6c42\u548c\u66f4\u65b0\u3002<\/p>\n\n\n\n
    4. **\u9519\u8bef\u5904\u7406**\uff1a\u5efa\u8bae\u6dfb\u52a0\u9519\u8bef\u5904\u7406\u903b\u8f91\uff0c\u4ee5\u9632\u6b62\u7f51\u7edc\u6216\u670d\u52a1\u5668\u51fa\u73b0\u95ee\u9898\u65f6\u5bfc\u81f4\u5e94\u7528\u5d29\u6e83\u3002<\/p>\n\n\n\n
    \u4ee5\u4e0b\u662f\u4fee\u6539\u540e\u7684\u4ee3\u7801\u793a\u4f8b <\/p>\n\n\n\n
    <template>\n  <el-table :data=\"tableData\">\n    <!-- ... -->\n  <\/el-table>\n<\/template>\n\n<script>\nexport default {\n  name: \"AppMain\",\n  data() {\n    return {\n      tableData: []\n    };\n  },\n  mounted() {\n    this.loadData();\n  },\n  methods: {\n    loadData() {\n      \/\/ \u786e\u4fdd\u4f7f\u7528\u6b63\u786e\u7684 HTTP \u65b9\u6cd5\uff08GET \u6216 POST\uff09\n      const method = 'POST'; \/\/ \u6839\u636e\u5b9e\u9645\u9700\u6c42\u9009\u62e9 GET \u6216 POST\n\n      if (method === 'GET') {\n        this.$axios.get(this.$httpUrl + '\/user\/list')\n          .then(response => {\n            this.tableData = response.data;\n          })\n          .catch(error => {\n            console.error('Error fetching data:', error);\n          });\n      } else if (method === 'POST') {\n        this.$axios.post(this.$httpUrl + '\/user\/listP', {})\n          .then(response => {\n            this.tableData = response.data;\n          })\n          .catch(error => {\n            console.error('Error fetching data:', error);\n          });\n      }\n    }\n  }\n};\n<\/script><\/code><\/pre>\n\n\n\n
    \u8bf7\u6ce8\u610f\u4ee5\u4e0b\u51e0\u70b9\uff1a
    - \u5c06 `beforeMount` \u6539\u4e3a `mounted`\u3002
    - \u5728 `loadData` \u65b9\u6cd5\u4e2d\u6839\u636e\u5b9e\u9645\u60c5\u51b5\u9009\u62e9 GET \u6216 POST \u8bf7\u6c42\u3002
    - \u5c06\u540e\u7aef\u8fd4\u56de\u7684\u6570\u636e\u76f4\u63a5\u8d4b\u503c\u7ed9 `tableData`\u3002
    - \u6dfb\u52a0\u9519\u8bef\u5904\u7406\u903b\u8f91\u3002<\/p>\n\n\n\n
    \u8fd9\u6837\u5e94\u8be5\u53ef\u4ee5\u5e2e\u52a9\u4f60\u89e3\u51b3\u201c\u6682\u65e0\u6570\u636e\u201d\u7684\u95ee\u9898\u3002\u5982\u679c\u95ee\u9898\u4ecd\u7136\u5b58\u5728\uff0c\u8bf7\u68c0\u67e5\u540e\u7aef API \u7684 URL \u662f\u5426\u6b63\u786e\u4ee5\u53ca\u8fd4\u56de\u7684\u6570\u636e\u683c\u5f0f\u662f\u5426\u7b26\u5408\u9884\u671f\u3002\"\"<\/p>\n\n\n\n
     2.\u7528tag\u8f6c\u6362\u5217<\/p>\n\n\n\n
    <template>\n  <el-table :data=\"tableData\">\n    <el-table-column prop=\"id\" label=\"ID\" width=\"60\">\n    <\/el-table-column>\n    <el-table-column prop=\"no\" label=\"\u8d26\u53f7\" width=\"120\">\n    <\/el-table-column>\n    <el-table-column prop=\"name\" label=\"\u59d3\u540d\" width=\"80\">\n    <\/el-table-column>\n    <el-table-column prop=\"age\" label=\"\u5e74\u9f84\" width=\"80\">\n    <\/el-table-column>\n    <el-table-column prop=\"sex\" label=\"\u6027\u522b\" width=\"80\">\n      <template slot-scope=\"scope\">\n        <el-tag\n            :type=\"scope.row.sex === 1 ?'primary':'success'\"\n            disable-transitions>{{scope.row.sex=== 1 ?'\u7537':'\u5973'}}<\/el-tag>\n       <\/template>\n    <\/el-table-column>\n    <el-table-column prop=\"roleId\" label=\"\u89d2\u8272\" width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-tag\n            :type=\"scope.row.roleId === 0 ?'danger':(scope.row.roleId === 1 ?'primary':'success')\"\n            disable-transitions>{{scope.row.roleId === 0 ?'\u8d85\u7ea7\u7ba1\u7406\u5458':(scope.row.roleId === 1 ?'\u7ba1\u7406\u5458':'\u7528\u6237')}}<\/el-tag>\n      <\/template>\n    <\/el-table-column>\n    <el-table-column prop=\"phone\" label=\"\u7535\u8bdd\" width=\"120\">\n    <\/el-table-column>\n    <el-table-column prop=\"operate\" label=\"\u64cd\u4f5c\">\n    <\/el-table-column>\n  <\/el-table>\n<\/template><\/code><\/pre>\n\n\n\n
    \u53ef\u80fd\u4f1a\u62a5\u9519\uff0cidea\u53c8\u62bd\u98ce\u4e86\uff0c\u8fdb\u4e00\u6b65\u4fee\u6539<\/p>\n\n\n\n
    <template>\n  <el-table :data=\"tableData\"\n  :header-cell-style=\"{background:'#f2f5fc',color:'#555'}\"\n  border\n  >\n    <el-table-column prop=\"id\" label=\"ID\" width=\"60\">\n    <\/el-table-column>\n    <el-table-column prop=\"no\" label=\"\u8d26\u53f7\" width=\"120\">\n    <\/el-table-column>\n    <el-table-column prop=\"name\" label=\"\u59d3\u540d\" width=\"80\">\n    <\/el-table-column>\n    <el-table-column prop=\"age\" label=\"\u5e74\u9f84\" width=\"80\">\n    <\/el-table-column>\n    <el-table-column prop=\"sex\" label=\"\u6027\u522b\" width=\"80\">\n      <template slot-scope=\"scope\">\n        <el-tag\n            :type=\"scope.row.sex === 1 ?'primary':'success'\"\n            disable-transitions>{{scope.row.sex === 1 ?'\u7537':'\u5973'}}<\/el-tag>\n      <\/template>\n    <\/el-table-column>\n    <el-table-column prop=\"roleId\" label=\"\u89d2\u8272\" width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-tag\n            :type=\"scope.row.roleId === 0 ?'danger':(scope.row.roleId === 1 ?'primary':'success')\"\n            disable-transitions>{{scope.row.roleId === 0 ?'\u8d85\u7ea7\u7ba1\u7406\u5458':(scope.row.roleId === 1 ?'\u7ba1\u7406\u5458':'\u7528\u6237')}}<\/el-tag>\n      <\/template>\n    <\/el-table-column>\n    <el-table-column prop=\"phone\" label=\"\u7535\u8bdd\" width=\"120\">\n    <\/el-table-column>\n    <el-table-column prop=\"operate\" label=\"\u64cd\u4f5c\">\n      <el-button size=\"small\" type=\"success\">\u7f16\u8f91<\/el-button>\n      <el-button size=\"small\" type=\"danger\">\u5220\u9664<\/el-button>\n    <\/el-table-column>\n  <\/el-table>\n<\/template>\n\n<style scoped>\n\n<\/style>\n<script>\nexport default {\n  name: \"Main\",\n  data() {\n    return {\n      tableData: []\n    }\n  },\n  methods: {\n    loadGet() {\n      this.$axios.get(this.$httpUrl + '\/user\/list').then(res => res.data).then(res => {\n        console.log(res)\n      })\n    },\n    loadPost(){\n      this.$axios.post(this.$httpUrl+'\/user\/listP',{}).then(res=>res.data).then(res=>{\n        console.log(res)\n        if(res.code===200){\n          this.tableData=res.data\n        }\n        else{\n          alert('\u83b7\u53d6\u6570\u636e\u5931\u8d25\uff01\u8bf7\u5237\u65b0\u9875\u9762')\n        }\n      })\n    }\n  },\n  beforeMount() {\n    \/\/ this.loadGet();\n    this.loadPost()\n  }\n}\n\n<\/script><\/code><\/pre>\n\n\n\n
    \u4fee\u6539\u5bf9\u5e94\u7684Usercontroller.java\uff0c\u56e0\u4e3a\u4f60\u662f\u4e00\u4e2a\u5217\u8868\uff0c\u67e5\u51fa\u6765\u7684\u6570\u636e\u5c31\u653e\u8fdb\u53bb\u5c31\u597d<\/p>\n\n\n\n
    \/\/\u67e5\u8be2\uff08\u6a21\u7cca\u3001\u5339\u914d\uff09\n    @PostMapping(\"\/listP\")\n    public Result listP(@RequestBody User user) {\n        LambdaQueryWrapper<User> lambdaQueryWrapper = new LambdaQueryWrapper();\n        if(StringUtils.isNotBlank(user.getName())){\n            lambdaQueryWrapper.like(User::getName, user.getName());\n        }\n        \/\/lambdaQueryWrapper.like(User::getName, user.getName());\n        \/\/lambdaQueryWrapper.eq(User::getName, user.getName());\n        \/\/eq\u5c31\u662f\u5b8c\u5168\u5339\u914d\n        return Result.success(userService.list(lambdaQueryWrapper));\n    }<\/code><\/pre>\n\n\n\n
    \u91cd\u542f\u540e\u7aef\u670d\u52a1WmsApplication\uff0c\u8fd9\u65f6\u524d\u7aef\u5237\u65b0\u540e\u4ec0\u4e48\u90fd\u6ca1\u6709\u662f\u6b63\u5e38\u7684\uff0c\u56e0\u4e3a\u6570\u636e\u7ecf\u8fc7\u4e86\u4e00\u5c42\u5c01\u88c5\uff0c\u5728AppMain\u4e2d\u4fee\u6539loadPost\u5982\u4e0b\uff0c\u5bf9200\u8fdb\u884c\u5224\u5b9a\uff0c<\/p>\n\n\n\n
    loadPost(){\n        this.$axios.post(this.$httpUrl+'\/user\/listP',{}).then(res=>res.data).then(res=>{\n          console.log(res)\n          if(res.code===200){\n            this.tableData=res.data\n          }\n          else{\n            alert('\u83b7\u53d6\u6570\u636e\u5931\u8d25\uff01\u8bf7\u5237\u65b0\u9875\u9762')\n          }\n\n        })\n      }<\/code><\/pre>\n\n\n\n
    \u5341\u4e03\u3001\u5206\u9875\u67e5\u8be2 <\/h1>\n\n\n\n
    1.\u9875\u9762\u52a0\u4e0a\u5206\u9875\u4ee3\u7801
    2.\u4fee\u6539\u67e5\u8be2\u65b9\u6cd5\u548c\u53c2\u6570
    3.\u5904\u7406\u7ffb\u9875\u3001\u8bbe\u7f6e\u6761\u6570\u903b\u8f91\uff08\u6ce8\u610f\u4e00\u4e2a\u95ee\u9898\uff09<\/p>\n\n\n\n
    Main.vue<\/p>\n\n\n\n
    <template>\n  <div>\n    <el-table :data=\"tableData\"\n              :header-cell-style=\"{background:'#f2f5fc',color:'#555'}\"\n              border\n    >\n      <el-table-column prop=\"id\" label=\"ID\" width=\"60\">\n      <\/el-table-column>\n      <el-table-column prop=\"no\" label=\"\u8d26\u53f7\" width=\"120\">\n      <\/el-table-column>\n      <el-table-column prop=\"name\" label=\"\u59d3\u540d\" width=\"80\">\n      <\/el-table-column>\n      <el-table-column prop=\"age\" label=\"\u5e74\u9f84\" width=\"80\">\n      <\/el-table-column>\n      <el-table-column prop=\"sex\" label=\"\u6027\u522b\" width=\"80\">\n        <template slot-scope=\"scope\">\n          <el-tag\n              :type=\"scope.row.sex === 1 ?'primary':'success'\"\n              disable-transitions>{{ scope.row.sex === 1 ? '\u7537' : '\u5973' }}\n          <\/el-tag>\n        <\/template>\n      <\/el-table-column>\n      <el-table-column prop=\"roleId\" label=\"\u89d2\u8272\" width=\"120\">\n        <template slot-scope=\"scope\">\n          <el-tag\n              :type=\"scope.row.roleId === 0 ?'danger':(scope.row.roleId === 1 ?'primary':'success')\"\n              disable-transitions>\n            {{ scope.row.roleId === 0 ? '\u8d85\u7ea7\u7ba1\u7406\u5458' : (scope.row.roleId === 1 ? '\u7ba1\u7406\u5458' : '\u7528\u6237') }}\n          <\/el-tag>\n        <\/template>\n      <\/el-table-column>\n      <el-table-column prop=\"phone\" label=\"\u7535\u8bdd\" width=\"120\">\n      <\/el-table-column>\n      <el-table-column prop=\"operate\" label=\"\u64cd\u4f5c\">\n        <el-button size=\"small\" type=\"success\">\u7f16\u8f91<\/el-button>\n        <el-button size=\"small\" type=\"danger\">\u5220\u9664<\/el-button>\n      <\/el-table-column>\n    <\/el-table>\n    <el-pagination\n        @size-change=\"handleSizeChange\"\n        @current-change=\"handleCurrentChange\"\n        :current-page=\"pageNum\"\n        :page-sizes=\"[5, 10, 20,50]\"\n        :page-size=\"pageSize\"\n        layout=\"total, sizes, prev, pager, next, jumper\"\n        :total=\"total\">\n    <\/el-pagination>\n  <\/div>\n<\/template>\n\n<style scoped>\n\n<\/style>\n<script>\nexport default {\n  name: \"Main\",\n  data() {\n    return {\n      tableData: [],\n      pageSize: 10,\n      pageNum: 1,\n      total: 0\n    }\n  },\n  methods: {\n    loadGet() {\n      this.$axios.get(this.$httpUrl + '\/user\/list').then(res => res.data).then(res => {\n        console.log(res)\n      })\n    },\n    loadPost() {\n      this.$axios.post(this.$httpUrl + '\/user\/listPageC1', {\n        pageSize:this.pageSize,\n        pageNum:this.pageNum\n      }).then(res => res.data).then(res => {\n        console.log(res)\n        if (res.code === 200) {\n          this.tableData = res.data\n          this.total=res.total\n        } else {\n          alert('\u83b7\u53d6\u6570\u636e\u5931\u8d25\uff01\u8bf7\u5237\u65b0\u9875\u9762')\n        }\n      })\n    },\n    handleSizeChange(val) {\n      console.log(`\u6bcf\u9875 ${val} \u6761`);\n      this.pageNum = 1\/\/\u8fd9\u4e2a\u9519\u8bef\u662f\u5148\u7ffb\u5230\u7b2c\u4e8c\u9875\u5728\u8c03\u9875\u9762\u6761\u6570\uff0c\u663e\u793a\u65e0\u6570\u636e\n      this.pageSize = val\n      this.loadPost()\n    },\n    handleCurrentChange(val) {\n      console.log(`\u5f53\u524d\u9875: ${val}`);\n      this.pageNum = val\n      this.loadPost()\n    }\n  },\n  beforeMount() {\n    \/\/ this.loadGet();\n    this.loadPost()\n  }\n}\n\n<\/script><\/code><\/pre>\n\n\n\n
     QueryPageParam.java<\/p>\n\n\n\n
    private HashMap parma = new HashMap();\n\npublic HashMap getParam() {\n    return parma;\n}<\/pre>\n\n\n\n
     UserController.vue<\/p>\n\n\n\n
    @PostMapping(\"\/listPageC1\")\n    \/\/public List<User>listPage(@RequestBody HashMap map){\n    public Result listPageC1(@RequestBody QueryPageParam query) {\n        HashMap param = query.getParam();\n        String name = (String) param.get(\"name\");\n        System.out.println(\"name===\" + (String) param.get(\"name\"));\n\n        Page<User> page = new Page();\n        page.setCurrent(query.getPageNum());\n        page.setSize(query.getPageSize());\n\n        LambdaQueryWrapper<User> lambdaQueryWrapper = new LambdaQueryWrapper();\n        if(StringUtils.isNotBlank(name)&&!\"null\".equals(name)) {\n            lambdaQueryWrapper.like(User::getName, name);\n        }\n\n        \/\/IPage result=userService.pageC(page);\n        IPage result=userService.pageCC(page,lambdaQueryWrapper);\n        System.out.println(\"total==\"+result.getTotal());\n\n\n        return Result.success(result.getRecords(),result.getTotal());\/\/\u63d0\u9192\uff0clistPageC1\u7684return\u8bb0\u5f97\u6539\n    }<\/code><\/pre>\n\n\n\n
    \u5341\u516b\u3001\u67e5\u8be2\u5904\u7406<\/h1>\n\n\n\n
    1.\u67e5\u8be2\u7684\u5e03\u5c40\uff08\u5305\u542b\u67e5\u8be2\u3001\u91cd\u7f6e\u6309\u94ae\uff09
    2.\u8f93\u5165\u6846\uff0c\u5728appmain.vue\u4e2d\u5982\u6b64<\/p>\n\n\n\n
    <template>\n  <div>\n    <div style=\"margin-left:5px\">\n      <el-input v-model=\"name\" placeholder=\"\u8bf7\u8f93\u5165\u540d\u5b57:\" suffix-icon=\"el-icon-search\" style=\"width:200px;\"><\/el-input>\n      <el-button type =\"primary\" style=\"margin-left:5px\" @click=\"loadPost\">\u67e5\u8be2<\/el-button>\n      <el-button type=\"success\">\u91cd\u7f6e<\/el-button>\n    <\/div>\n  <el-table :data=\"tableData\"\n  :header-cell-style=\"{background:'#e0ecf4',color:'#555'}\"\n  border\n  ><\/code><\/pre>\n\n\n\n
    main.js\u4e2d\u5982\u6b64<\/p>\n\n\n\n
    \/\/Vue.use(ElementUI)\nVue.use(ElementUI,{size:'small'})<\/pre>\n\n\n\n
     \u67e5\u8be2\u8981\u628a\u6570\u636e\u4f20\u5230\u540e\u7aef\u53bb\u554a\uff0cloadpost\u9700\u8981\u4f20\u4e00\u4e2aname\u8fc7\u53bb\u554a\uff0cparam\u662f\u4ee3\u8868\u9700\u8981\u4f20\u7684\u53c2\u6570\u554a \u3002\u5c31\u662f\u90a3\u4e2aquerypageparam\u4e00\u8d77\u5c01\u88c5\u7684\u554ahashmap param\u60f3\u4f20\u4ec0\u4e48\u4f20\u4ec0\u4e48\uff0c<\/p>\n\n\n\n
    3\u4e0b\u62c9\u6846
    4.\u56de\u8f66\u4e8b\u4ef6\uff08\u67e5\u8be2\uff09@keyup.enter.native
    5.\u91cd\u7f6e\u5904\u7406\uff1a\u65b0\u589e<\/p>\n\n\n\n
    <el-input v-model=\"name\" placeholder=\"\u8bf7\u8f93\u5165\u540d\u5b57:\" suffix-icon=\"el-icon-search\" style=\"width:200px;\"\n       @keyup.enter.native=\"loadPost\"><\/el-input><!--Vue3\u8f93\u5165\u6846\u56de\u8f66\u4e8b\u4ef6\u7528@change=\"loadPostPage\",\u91cd\u7f6e\u53ea\u9700\u52a0 clearable\u5c5e\u6027-->\n      <el-select v-model=\"sex\" filterableplacehoLder=\"\u8bf7\u9009\u62e9\u6027\u522b\">\n        <el-option\n            v-for=\"item in sexs\"\n            :key=\"item.value\"\n            :label=\"item.label\"\n            :value=\"item.value\">\n        <\/el-option>\n      <\/el-select>\n..................\n..................\n..................\nexport default{\n    name:\"AppMain\",\/*\u5176\u5b9e\u662f\u60f3\u6539\u6210MainComponent\u7684*\/\n    data() {\n      return {\n        tableData:[],\n        pageSize:10,\n        pageNum:1,\n        total:0,\n        name:'',\n        sex:'',\n        sexs:[\n          {\n            value:'1',\n            label:'\u7537'\n          },{\n            value:'0',\n            label:'\u5973'\n          }\n        ],\n      }\n    },<\/code><\/pre>\n\n\n\n
    \u53ef\u4ee5\u4f18\u5316\uff0c\u83b7\u53d6\u5f53\u524d\u89e6\u53d1\u4e8b\u4ef6\u7684dom\u7684\u53c2\u6570\uff0c\u518d\u53bb\u6267\u884caxios\u8bf7\u6c42\uff0c\u4e0d\u7136\u6bcf\u6b21\u90fd\u8981\u7ed9\u540e\u7aef\u53d1\u9001\u4e00\u5927\u5806\u6570\u636e \uff0cusercontroller\u90e8\u5206C1\u5982\u4e0b<\/p>\n\n\n\n
    @PostMapping(\"\/listPageC1\")\n    \/\/public List<User>listPage(@RequestBody HashMap map){\n    public Result listPageC1(@RequestBody QueryPageParam query) {\n        HashMap param = query.getParam();\n        String name = (String) param.get(\"name\");\n        \/\/System.out.println(\"name===\" + (String) param.get(\"name\"));\n        String sex = (String) param.get(\"sex\");\n\n        Page<User> page = new Page();\n        page.setCurrent(query.getPageNum());\n        page.setSize(query.getPageSize());\n\n        LambdaQueryWrapper<User> lambdaQueryWrapper = new LambdaQueryWrapper();\n        if(StringUtils.isNotBlank(name)&&!\"null\".equals(name)) {\n            lambdaQueryWrapper.like(User::getName, name);\n        }\n        if(StringUtils.isNotBlank(sex)) {\n            lambdaQueryWrapper.eq(User::getSex, sex);\n        }\n        \/\/IPage result=userService.pageC(page);\n        IPage result=userService.pageCC(page,lambdaQueryWrapper);\n        System.out.println(\"total==\"+result.getTotal());\n\n        return Result.success(result.getRecords(),result.getTotal());\/\/\u63d0\u9192\uff0clistPageC1\u7684return\u8bb0\u5f97\u6539\n    }<\/code><\/pre>\n\n\n\n
     Appmain.vue<\/p>\n\n\n\n
     <div style=\"margin-left:5px\">\n      <el-input v-model=\"name\" placeholder=\"\u8bf7\u8f93\u5165\u540d\u5b57:\" suffix-icon=\"el-icon-search\" style=\"width:200px;\"\n       @keyup.enter.native=\"loadPost\"><\/el-input><!--Vue3\u8f93\u5165\u6846\u56de\u8f66\u4e8b\u4ef6\u7528@change=\"loadPostPage\",\u91cd\u7f6e\u53ea\u9700\u52a0 clearable\u5c5e\u6027-->\n      <el-select v-model=\"sex\" filterableplacehoLder=\"\u8bf7\u9009\u62e9\u6027\u522b\" style=\"margin-left:5px\">\n        <el-option\n              v-for=\"item in sexs\"\n              :key=\"item.value\"\n              :label=\"item.label\"\n              :value=\"item.value\">\n        <\/el-option>\n      <\/el-select>\n      <el-button type =\"primary\" style=\"margin-left:5px\" @click=\"loadPost\">\u67e5\u8be2<\/el-button>\n      <el-button type=\"success\" @click=\"resetParam\">\u91cd\u7f6e<\/el-button><!--\u91cd\u7f6e\u597d\u50cf\u5728input\u91cc\u9762\u6dfb\u52a0\u4e2aclearable\u53ef\u4ee5\u5b9e\u73b0\u540d\u5b57\u7684\u6e05\u7a7a;\u76f4\u63a5\u91cd\u7f6e\u63a5post\u5982\u4f55?-->\n    <\/div>\n........................\n..........................\n..........................\n.....................methods\u4e2d\u6dfb\u52a0\u8fd9\u4e2a\nresetParam(){\n        this.name=''\n        this.sex=''\n      },<\/code><\/pre>\n\n\n\n
    \u4ee3\u7801\u5df2\u7ecf\u76f8\u5f53\u4e0d\u9519\u4e86\uff0c\u4f46\u786e\u5b9e\u6709\u4e00\u4e9b\u5730\u65b9\u53ef\u4ee5\u4f18\u5316\u3002\u7279\u522b\u662f\u5173\u4e8e\u51cf\u5c11\u4e0d\u5fc5\u8981\u7684\u6570\u636e\u4f20\u8f93\uff0c\u53ef\u4ee5\u901a\u8fc7\u4f18\u5316\u524d\u7aef\u903b\u8f91\u6765\u5b9e\u73b0\u3002\u4e0b\u9762\u662f\u51e0\u4e2a\u5efa\u8bae\uff1a<\/p>\n\n\n\n
    1. **\u52a8\u6001\u6784\u5efa\u8bf7\u6c42\u53c2\u6570**\uff1a
       \u53ef\u4ee5\u901a\u8fc7\u4e00\u4e2a\u65b9\u6cd5\u6765\u52a8\u6001\u6784\u5efa\u8981\u53d1\u9001\u7ed9\u540e\u7aef\u7684\u6570\u636e\u5bf9\u8c61\uff0c\u8fd9\u6837\u53ef\u4ee5\u786e\u4fdd\u53ea\u6709\u7528\u6237\u5b9e\u9645\u66f4\u6539\u8fc7\u7684\u5b57\u6bb5\u624d\u4f1a\u5305\u542b\u5728\u8bf7\u6c42\u4e2d\u3002<\/p>\n\n\n\n
    2. **\u4f7f\u7528\u8ba1\u7b97\u5c5e\u6027**\uff1a
       \u5bf9\u4e8e\u90a3\u4e9b\u4f9d\u8d56\u4e8e\u5176\u4ed6\u6570\u636e\u53d8\u5316\u800c\u53d8\u5316\u7684\u6570\u636e\uff0c\u53ef\u4ee5\u8003\u8651\u4f7f\u7528\u8ba1\u7b97\u5c5e\u6027\uff08computed properties\uff09\uff0c\u8fd9\u53ef\u4ee5\u5e2e\u52a9\u51cf\u5c11\u4e0d\u5fc5\u8981\u7684\u6570\u636e\u5904\u7406\u3002<\/p>\n\n\n\n
    3. **\u4e8b\u4ef6\u59d4\u6258**\uff1a
       \u867d\u7136\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\u5e76\u4e0d\u9002\u7528\uff0c\u4f46\u5728\u67d0\u4e9b\u60c5\u51b5\u4e0b\uff0c\u4f7f\u7528\u4e8b\u4ef6\u59d4\u6258\u53ef\u4ee5\u51cf\u5c11DOM\u76d1\u542c\u5668\u7684\u6570\u91cf\uff0c\u63d0\u9ad8\u6027\u80fd\u3002<\/p>\n\n\n\n
    4. **\u4f18\u5316\u6309\u94ae\u64cd\u4f5c**\uff1a
       \u4f60\u53ef\u4ee5\u5c06`loadPost`\u65b9\u6cd5\u7684\u8c03\u7528\u5c01\u88c5\u5728\u4e00\u4e2a\u65b0\u7684\u65b9\u6cd5\u4e2d\uff0c\u4ee5\u4fbf\u66f4\u597d\u5730\u63a7\u5236\u4f55\u65f6\u4ee5\u53ca\u5982\u4f55\u53d1\u9001\u8bf7\u6c42\u3002<\/p>\n\n\n\n
    \u4ee5\u4e0b\u662f\u6839\u636e\u4e0a\u8ff0\u5efa\u8bae\u5bf9\u4f60\u7684\u4ee3\u7801\u8fdb\u884c\u7684\u4e00\u4e9b\u4f18\u5316\uff1a <\/p>\n\n\n\n
    <template>\n  <div>\n    <div style=\"margin-left:5px\">\n      <el-input v-model=\"searchParams.name\" placeholder=\"\u8bf7\u8f93\u5165\u540d\u5b57:\" suffix-icon=\"el-icon-search\" style=\"width:200px;\" @keyup.enter.native=\"fetchData\"><\/el-input>\n      <el-select v-model=\"searchParams.sex\" filterable placeholder=\"\u8bf7\u9009\u62e9\u6027\u522b\" style=\"margin-left:5px\">\n        <el-option\n          v-for=\"item in sexs\"\n          :key=\"item.value\"\n          :label=\"item.label\"\n          :value=\"item.value\">\n        <\/el-option>\n      <\/el-select>\n      <el-button type=\"primary\" style=\"margin-left:5px\" @click=\"fetchData\">\u67e5\u8be2<\/el-button>\n      <el-button type=\"success\" @click=\"resetParams\">\u91cd\u7f6e<\/el-button>\n    <\/div>\n    <el-table :data=\"tableData\" :header-cell-style=\"{background:'#e0ecf4',color:'#555'}\" border>\n      <!-- \u8868\u683c\u5217\u5b9a\u4e49\u4fdd\u6301\u4e0d\u53d8 -->\n    <\/el-table>\n    <el-pagination\n      @size-change=\"handleSizeChange\"\n      @current-change=\"handleCurrentChange\"\n      :current-page=\"currentPage\"\n      :page-sizes=\"[2, 5, 10, 20, 50]\"\n      :page-size=\"pageSize\"\n      layout=\"total, sizes, prev, pager, next, jumper\"\n      :total=\"total\">\n    <\/el-pagination>\n  <\/div>\n<\/template>\n\n<script>\nexport default {\n  name: \"MainComponent\",\n  data() {\n    return {\n      tableData: [],\n      pageSize: 10,\n      pageNum: 1,\n      total: 0,\n      searchParams: {\n        name: '',\n        sex: ''\n      },\n      sexs: [\n        { value: '1', label: '\u7537' },\n        { value: '0', label: '\u5973' }\n      ]\n    };\n  },\n  methods: {\n    fetchData() {\n      const params = {\n        pageSize: this.pageSize,\n        pageNum: this.pageNum,\n        ...this.searchParams \/\/ \u5c55\u5f00\u641c\u7d22\u53c2\u6570\u5bf9\u8c61\n      };\n\n      \/\/ \u8fc7\u6ee4\u6389\u503c\u4e3a\u7a7a\u7684\u53c2\u6570\uff0c\u907f\u514d\u5411\u540e\u7aef\u53d1\u9001\u591a\u4f59\u7684\u6570\u636e\n      const filteredParams = Object.fromEntries(Object.entries(params).filter(([_, v]) => v !== '' && v !== null));\n\n      this.$axios.post(this.$httpUrl + '\/user\/listPageC1', filteredParams)\n        .then(res => res.data)\n        .then(res => {\n          if (res.code === 200) {\n            this.tableData = res.data;\n            this.total = res.total;\n          } else {\n            alert('\u83b7\u53d6\u6570\u636e\u5931\u8d25\uff01\u8bf7\u5237\u65b0\u9875\u9762');\n          }\n        });\n    },\n    resetParams() {\n      this.searchParams.name = '';\n      this.searchParams.sex = '';\n    },\n    handleSizeChange(val) {\n      this.pageSize = val;\n      this.pageNum = 1; \/\/ \u5207\u6362\u6bcf\u9875\u6570\u91cf\u65f6\u91cd\u7f6e\u9875\u7801\u4e3a\u7b2c\u4e00\u9875\n      this.fetchData();\n    },\n    handleCurrentChange(val) {\n      this.pageNum = val;\n      this.fetchData();\n    }\n  },\n  beforeMount() {\n    this.fetchData();\n  }\n};\n<\/script><\/code><\/pre>\n\n\n\n
    \u4e3b\u8981\u6539\u52a8\u70b9\uff1a<\/p>\n\n\n\n