├── .babelrc ├── .gitignore ├── README.MD ├── index1.html ├── package.json ├── src ├── App.vue ├── components │ └── admin │ │ ├── account │ │ └── login.vue │ │ ├── common │ │ ├── artadd.vue │ │ ├── artedit.vue │ │ ├── categoryadd.vue │ │ ├── categoryedit.vue │ │ ├── categorylist.vue │ │ └── commonartlist.vue │ │ ├── down │ │ ├── artadd.vue │ │ ├── artedit.vue │ │ ├── categoryadd.vue │ │ ├── categoryedit.vue │ │ ├── categorylist.vue │ │ └── downartlist.vue │ │ ├── goods │ │ ├── categoryadd.vue │ │ ├── categoryedit.vue │ │ ├── goodsadd.vue │ │ ├── goodscatelist.vue │ │ ├── goodsedit.vue │ │ └── goodslist.vue │ │ ├── layout.vue │ │ ├── order │ │ ├── orderedit.vue │ │ └── orderlist.vue │ │ ├── point │ │ ├── artadd.vue │ │ ├── artedit.vue │ │ ├── categoryadd.vue │ │ ├── categoryedit.vue │ │ ├── categorylist.vue │ │ └── pointartlist.vue │ │ ├── question │ │ ├── artadd.vue │ │ ├── artedit.vue │ │ ├── categoryadd.vue │ │ ├── categoryedit.vue │ │ ├── categorylist.vue │ │ └── questionartlist.vue │ │ └── subcom │ │ ├── addarticle.vue │ │ ├── articlelist.vue │ │ ├── cateadd.vue │ │ ├── cateedit.vue │ │ ├── catelist.vue │ │ └── editarticle.vue ├── kits │ ├── elementUIHelper.js │ └── kits.js ├── main.js └── stores │ ├── global │ └── index.js │ └── index.js ├── statics ├── css │ ├── site.css │ ├── site1.scss │ └── site2.less ├── imgs │ ├── bg.png │ └── logo.png ├── mui │ ├── css │ │ ├── icons-extra.css │ │ └── mui.css │ └── fonts │ │ ├── mui-icons-extra.ttf │ │ └── mui.ttf ├── theme_rms.rar ├── theme_rms │ ├── fonts │ │ ├── element-icons.ttf │ │ └── element-icons.woff │ └── index.css └── 修改后的elementUI的css文件.rar └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ], 5 | "plugins": [ 6 | "transform-vue-jsx", 7 | ["component", [ 8 | { 9 | "libraryName": "element-ui", 10 | "styleLibraryName": "theme-default" 11 | }] 12 | ] 13 | ] 14 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | lib-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | 10 | pids 11 | logs 12 | results 13 | npm-debug.log 14 | node_modules 15 | dist 16 | .idea 17 | .svn 18 | -------------------------------------------------------------------------------- /README.MD: -------------------------------------------------------------------------------- 1 |  2 | # 在线访问 3 | 4 | [点击在线访问][] 5 | 用户名：admin 密码:123456 6 | 7 | #网站特殊文件夹说明： 8 | 9 | ``` 10 | 网站的管理系统页面和前端展示页面是放在一个项目中，所以 11 | components中的admin文件夹中的所有文件均为管理系统的页面 12 | components中的site文件夹中的所有文件均为前端展示系统的页面 13 | 14 | statics/site文件夹下的所有内容均为前端展示系统的页面 15 | statics/css下的文件均为管理系统的样式控制 16 | theme_rms，imgs,mui均可以为共用 17 | 18 | ``` 19 | 20 | ## 一、运行这个项目的步骤： 21 | - 先在这个文件夹中打开cmd面板，输入 npm install 22 | - 在cmd面板中执行 npm run dev 23 | 24 | ``` 25 | 26 | 当前webpack要升级到2.x，那么webpack-dev-server也必须使和webpack2.x匹配的，理论上讲 27 | webpack-dev-server肯定也是2.x版本 28 | 29 | ``` 30 | 31 | ## 二、update 版本 32 | 33 | - v2 elementUI的样式使用的是statics文件夹中的样式再配合site.css来实现最终效果 34 | - v4 利用elementUI实现静态页面布局和登录布局 35 | - v6 1、实现文章列表分页数据展示 2、实现列表页面中的功能图标，点亮和熄灭功能（为与api对接） 36 | - v7 1、完成文章新增，编辑，全选，删除，列表功能，2、还未实现列表中的搜索功能和轮播，置顶，推荐功能 37 | - v9 1、实现分类的编辑功能 2、集成菜单中的所有分类连接 38 | - v10 实现商品列表分页展示数据 ，编辑商品，新增商品 39 | - v11 在商品新增和编辑页面中利用easyscroll实现美观的滚动条 40 | 41 | ``` 42 | easyscroll使用方法： 43 | 注意：在此项目中，需要设定EasyScrollbar 中的div的样式，设置成height:200px滚动条进入页面时自动隐藏 44 | 设置为max-height:200px进入页面自动显示滚动条 45 | 46 | 1、项目render函数采用jsx语法完成，项目中需要安装jsx插件，具体请访问 https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage 47 | 步骤： 48 | cnpm install babel-plugin-syntax-jsx, babel-plugin-transform-vue-jsx, babel-helper-vue-jsx-merge-props, babel-preset-es2015 --save-dev 49 | 50 | 在 .babelrc中增加如下配置： 51 | 52 | { 53 | "presets": ["es2015"], 54 | "plugins": ["transform-vue-jsx"] 55 | } 56 | 57 | 2、在webpack.config.js文件中的output节点后面增加 58 | resolve: { 59 | extensions: ['.js', '.vue'] 60 | } 61 | 62 | 3、使用步骤参考：https://garveyzuo.github.io/easyscroll.github.io/#/ 63 | 安装 64 | 运行： 65 | cnpm i easyscroll --save 66 | 在main.js中使用： 67 | import EasyScroll from 'easyscroll'; 68 | Vue.use(EasyScroll); 69 | 70 | 简单应用： 71 | 72 | 73 | 74 |
75 |
76 | 最简单的应用 77 |
78 |
79 | 80 | 81 | 82 | 83 | 说明： 84 | 安装完easyscroll之后，在组件中直接引用EasyScrollbar组件就行， 85 | 产生滚动条的内容作为EasyScroll的$slot插入到滚动条组件中， 86 | 注意插入到滚动条组件中内容 需要一个外层的包裹，即上面代码中的#wrapper div，其内部才是真正动态的内容。 87 | 88 | 配置参数： 89 | 滚动条的主要参数： 90 | opt:{ 91 | barColor:"#959595", //滚动条颜色 92 | barWidth:6, //滚动条宽度 93 | railColor:"#eee", //导轨颜色 94 | barMarginRight:0, //垂直滚动条距离整个容器右侧距离单位（px） 95 | barMaginBottom:0, //水平滚动条距离底部距离单位（px) 96 | barOpacityMin:0.3, //滚动条非激活状态下的透明度 97 | zIndex:"auto", //滚动条z-Index 98 | autohidemode:true, //自动隐藏模式 99 | horizrailenabled:true,//是否显示水平滚动条 100 | } 101 | 102 |
103 |
104 | 内容 105 |
106 |
107 | 108 | 119 | 120 | ``` 121 | - v13 实现登录功能和登录检查功能 122 | 123 | ``` 124 | 125 | 1、登录成功以后向session中写入一个cookie带回到浏览器，并且设置path=/admin/，表示只有将来浏览器在请求api服务器admin路径下的所有api才将cookie发送给服务器，将来可以通过设置path=/site/来达到前台的登录cookie和管理页面的cookie不是同一个，区分管理系统的登录session管理和前台用户登录的session管理 126 | 127 | 2、通过在 routes/accountRoute.js文件中定义一个 /account/islogin 来检测当前用户是否登录失效 128 | 在vue项目中的main.js中的路由钩子函数中如果当前跳转需要登录验证，利用axios请求 /admin/account/islogin，如果返回的是 {"code":"logined"}表示session有效，如果返回是{"coee":"nologin"}表示登录失效，跳转到登录页面重新登录 129 | 130 | ``` 131 | - v14 关于vue组件中的 186 | 187 | 2、在list.vue中的