随笔档案「2018年6月」 - gisery

Vue nodejs商城-订单模块

摘要：一、订单列表渲染新建OrderConfirm.vue订单确认页面，添加路由 src/router/index.js添加路由 import OrderConfirm from '@/views/OrderConfirm' // 订单确认页面 export default new Router({ r 阅读全文

posted @ 2018-06-28 04:42 gisery 阅读(6460) 评论(0) 推荐(2)

Vue nodejs商城-地址模块

摘要：一、地址列表渲染购物车列表页中点击checkout结账，若已勾选的商品为0，则不可以点击。 src/views/Cart.vue <a class="btn btn--red" v-bind:class="{'btn--dis':checkedCount==0}" @click="checkOut 阅读全文

posted @ 2018-06-28 04:35 gisery 阅读(1141) 评论(1) 推荐(1)

Vue node.js商城-购物车模块

摘要：一、渲染购物车列表页面新建src/views/Cart.vue获取cartList购物车列表数据就可以在页面中渲染出该用户的购物车列表数据 data(){ return { cartList:[] // 购物车商品列表 } }, mounted:function(){ this.init(); } 阅读全文

posted @ 2018-06-28 04:14 gisery 阅读(2970) 评论(1) 推荐(0)

Vue nodejs商城项目-登录模块

摘要：一、登录功能后端server/routes/users.js var User = require('./../models/users.js'); // 二级路由 // 登录接口 router.post("/login",function(req, res, next){ // 获取参数 var 阅读全文

posted @ 2018-06-28 04:11 gisery 阅读(2405) 评论(0) 推荐(0)

Vue nodejs商城项目-商品列表价格过滤和加入购物车功能

摘要：一、价格过滤功能 GoodsList.vue >>点击价格区间时发送请求 methods:{ getGoodsList(flag){ var param = { // 请求时传点击的价格区间数据给后台 priceLevel:this.priceChecked // 点击的价格区间 } ...... 阅读全文

posted @ 2018-06-28 03:57 gisery 阅读(2720) 评论(0) 推荐(0)

Vue nodejs商城项目-商品列表页面组件

摘要：data(){ return { goodsList:[], // 商品列表 priceFilter:[ // 价格区间数组 { startPrice:'0.00', endPrice:'100.00' }, { startPrice:'100.00', endPrice:'500.00' }, { 阅读全文

posted @ 2018-06-28 03:49 gisery 阅读(3910) 评论(0) 推荐(0)

Vue nodejs商城项目-商品的分页、排序、筛选

摘要：1、分页商品列表的分页实现是后台根据前端请求的页面大小、页码位置，去数据库中查询指定位置的数据然后返回给前端。比如页面大小为8，要查第3页的数据，则跳过2*8条数据，然后返回8条数据。在实现滚动加载时，页面刚一加载完成并不需要请求所有数据，当用户下拉到页面底部时，再去请求数据并拼接到商品数据列表阅读全文

posted @ 2018-06-28 03:39 gisery 阅读(3369) 评论(0) 推荐(0)

Vue nodejs商城项目- 前后端数据传递

摘要：1、利用Mongoose查询MongoDB 通过mongoose插件可以简捷地从mondodb中获取数据，首先安装mongoose： cnpm install mongoose --save 使用mongoose需要一个模式Schema，它用于定义你从mongodb中查询的每个文档条目的内容，然后通阅读全文

posted @ 2018-06-28 03:34 gisery 阅读(6680) 评论(1) 推荐(2)

Vue nodejs商城项目-搭建express框架环境

摘要：1.express-project 搭建express框架环境安装express generator生成器通过生成器自动创建项目配置分析安装 cnpm i -g express-generator express --version // 查看版本 express server // 创建项阅读全文

posted @ 2018-06-28 03:29 gisery 阅读(1045) 评论(0) 推荐(0)

Vue nodejs商城项目-项目概述

摘要：项目概况用vue2.0 +node.js +MongonDB 做了一个商城系统技术选型 Vue2.0+node.js+express+MongoDB+axios+vuex 构建工具 Webpack 代码编辑器 VScode 业务模块 . 1.商品列表模块商品列表页分页和排序功能商品列表价格过阅读全文

posted @ 2018-06-28 03:15 gisery 阅读(3383) 评论(0) 推荐(0)

React后台管理系统-订单管理

摘要：1.订单管理页面和商品管理页面类似，都是一个搜索组件+列表组件 2.搜索框search组件 import React from 'react'; class ListSearch extends React.Component{ constructor(props){ super(props); t 阅读全文

posted @ 2018-06-27 13:31 gisery 阅读(1730) 评论(0) 推荐(0)

React后台管理系统-品类的增加、修改和查看

摘要：1.页面 2.品类列表展示 let listBody = this.state.list.map((category, index) => { return ( <tr key={index}> <td>{category.id}</td> <td>{category.name}</td> <td> 阅读全文

posted @ 2018-06-27 13:20 gisery 阅读(781) 评论(0) 推荐(0)

React后台管理系统-品类选择器二级联动组件

摘要：1.页面大致是这个样子 2.页面结构 <div className="col-md-10"> <select name="" onChange={(e) => this.onFirstCategoryChange(e)} className="form-control cate-select"> < 阅读全文

posted @ 2018-06-27 13:05 gisery 阅读(1602) 评论(0) 推荐(0)

vue 城市列表与字母表联动

摘要：实现两个联动一是点击右侧字母的时候，城市列表出现相应首字母下的城市二是鼠标在字母表上滑动的时候，城市列表实时跟着变化一．点击字母出现相应的列表，给每个字母设置handleLetterClick事件 <template> <div> <ul class="list"> <li class="it 阅读全文

posted @ 2018-06-27 04:25 gisery 阅读(4575) 评论(0) 推荐(1)

vue 城市搜索组件

摘要：1.实现大致是如下效果 2.搜索组件的页面结构 <template> <div> <div class="search"> <input v-model='keyword' class="search-input" type="text" placeholder="输入城市名或者拼音"/> </di 阅读全文

posted @ 2018-06-27 03:53 gisery 阅读(1348) 评论(0) 推荐(0)

React后端管理系统-商品详情detail组件

摘要：import React from 'react'; import MUtil from 'util/mm.jsx' import Product from 'service/product-service.jsx' import PageTitle from 'component/page-tit 阅读全文

posted @ 2018-06-26 22:37 gisery 阅读(348) 评论(0) 推荐(0)

React后台管理系统-添加商品组件

摘要：引入了CategorySelector 二级联动组件、FileUploader图片上传组件和RichEditor富文本编辑组件 import React from 'react'; import MUtil from 'util/mm.jsx' import Product from 'servic 阅读全文

posted @ 2018-06-26 22:29 gisery 阅读(553) 评论(0) 推荐(0)

React后台管理系统-品类选择器二级联动组件

摘要：品类选择器二级联动阅读全文

posted @ 2018-06-26 22:21 gisery 阅读(265) 评论(0) 推荐(0)

React后台管理系统-rich-editor组件

摘要：1.Simditor组件的github地址:https://github.com/mycolorway/simditor 网址：http://simditor.tower.im/ 2.在util里边新建rich-editor文件夹，里边新建index.jsx import React from 'r 阅读全文

posted @ 2018-06-26 20:14 gisery 阅读(1196) 评论(0) 推荐(0)

React后台管理系统-file-uploader组件

摘要：1.React文件上传组件github地址: https://github.com/SoAanyip/React-FileUpload 2.Util里边新建file-uploader文件夹，里边新建index.jsx import React from 'react'; import FileUpl 阅读全文

posted @ 2018-06-26 19:56 gisery 阅读(4529) 评论(0) 推荐(0)

React后台管理系统-商品管理列表组件

摘要：1.商品列表页面结构 <div id="page-wrapper"> <PageTitle title="商品列表"> <div className="page-header-right"> <Link to="/product/save" className="btn btn-primary"> 阅读全文

posted @ 2018-06-26 19:26 gisery 阅读(1161) 评论(0) 推荐(0)

React后台管理系统-商品列表搜索框listSearch组件

摘要：1.商品列表搜索框 2.搜索框页面的结构为 <div className="row search-wrap"> <div className="col-md-12"> <div className="form-inline"> <div className="form-group"> <select 阅读全文

posted @ 2018-06-26 19:05 gisery 阅读(2282) 评论(0) 推荐(0)

React后台管理系统-table-list组件

摘要：table-list组件可用于商品列表，用户列表页面需要传入一个tableHeads集合和tablebody import React from 'react'; // 通用的列表 class TableList extends React.Component{ constructor(props 阅读全文

posted @ 2018-06-26 17:55 gisery 阅读(411) 评论(0) 推荐(0)

React后台管理系统-用户列表页面

摘要：1.页面的结构 //遍历list, 返回数据 let listBody= this.state.list.map((user,index)=> { return ( <tr key={index}> <td>{user.id}</td> <td>{user.username}</td> <td>{u 阅读全文

posted @ 2018-06-26 17:39 gisery 阅读(1424) 评论(0) 推荐(0)

React后台管理系统- rc-pagination分页组件封装

摘要：1.用户列表页面使用的rc-pagination分页组件 Github地址: https://github.com/react-component/pagination 2.安装 cnpm install --save-dev rc-pagination 3.引入 import React from 阅读全文

posted @ 2018-06-26 17:01 gisery 阅读(738) 评论(0) 推荐(0)

React后台管理系统-登录页面

摘要：登录页面 <div className="col-md-4 col-md-offset-4"> <div className="panel panel-default login-panel"> <div className="panel-heading">欢迎登录 - MMALL管理系统</div 阅读全文

posted @ 2018-06-26 16:41 gisery 阅读(9629) 评论(0) 推荐(0)

React后台管理系统-首页Home组件

摘要：1.Home组件要显示用户总数、商品总数和订单总数，数据请求后端的 /manage/statistic/base_count.do接口，返回的是 this.state = { userCount : '-', productCount : '-', orderCount : '-' } //页面挂载阅读全文

posted @ 2018-06-26 15:41 gisery 阅读(617) 评论(0) 推荐(0)

React后台管理系统-后台接口封装

摘要：1新建文件夹 service ，里边建4个文件，分别是statistic-service.jsx 首页数据统计接口, user-service.jsx用户接口, product-service.jsx产品接口，order-service.jx订单接口 2.首页数据统计接口statistic-serv 阅读全文

posted @ 2018-06-26 15:27 gisery 阅读(3163) 评论(0) 推荐(0)

React后台管理系统-ajax请求封装

摘要：1.新建文件夹 util , 在util里边新建 mm.jsx文件 2.使用jquery里边的ajax发送请求，回调用promise,返回一个promise对象 request(param){ return new Promise((resolve, reject) => { $.ajax({ ty 阅读全文

posted @ 2018-06-26 15:12 gisery 阅读(525) 评论(0) 推荐(0)