![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
pdd移动端仿制
zhou-boy
可
展开
-
数据层-3-将JSON格式的文件的数据批量插入到数据库当中
将JSON格式的文件数据批量插入到数据库中##项目所在地址https://github.com/zhou-X-boy/Vue_study/tree/master/VueProject/pdd在服务端server文件夹下的router文件夹下的index.js文件中操作index.jspdd\server\router\index.jsindex.jsconst express = require('express');const router = express.Router();原创 2020-11-15 00:38:08 · 611 阅读 · 0 评论 -
数据层-2-实现服务器端访问MySql中的数据
实现服务器端访问MySQL数据库中的数据项目所在地址https://github.com/zhou-X-boy/Vue_study/tree/master/VueProject/pdd在服务器端进行操作在服务器端server文件夹下的router文件夹下的index.js中进行操作server\router\index.jsindex.jsindex.jsconst express = require('express');const router = express.Route原创 2020-11-15 00:36:15 · 125 阅读 · 0 评论 -
数据层-1-建立服务端跟MySQL之间的联系
建立联系下载MySQL第三方库在服务端文件夹server下下载npm install mysql --save服务端跟数据库进行关联新建文件夹db在服务端server文件夹下新建一个文件夹db用来存放跟数据库建立连接的文件新建JS文件在db文件夹下新建一个JS文件db.js进行连接数据库操作db.js//1:引入mysql模块const mysql = require('mysql');//2:建立连接const conn = mysql.createConnecti原创 2020-11-15 00:34:35 · 81 阅读 · 0 评论 -
3-Express服务端框架
Express框架express是什么1:Express.js 框架是目前最流行的node.js后端框架之一, 相当于jQuery和js之间的关系;2:Express 不对 Node.js 已有的特性进行二次抽象,我们只是在它之上扩展了 Web 应用所需的基本功能;3:功能类似的后端框架:Koa.js, egg.js, hapi.js安装express1:进入应用目录2:命令为你的应用创建一个 package.json 文件npm init3:安装 Express 并将其保存到依赖原创 2020-11-15 00:33:03 · 264 阅读 · 0 评论 -
视图层-Home-pdd项目通过Vuex状态管理请求首页轮播图和导航数据
请求首页轮播和导航数据在index.js中写入请求数据方法在项目目录下的src文件夹下的api文件夹下的index.js服务端入口文件写入请求数据方法src\api\index.jsindex.js//引入 ajax 模块import ajax from './ajax'//1;设置基础路径const BASE_URL = 'http://127.0.0.1:3000';//2:请求方法//2.1:请求首页的轮播图export const getHomeCasual = ()=原创 2020-11-15 00:23:04 · 231 阅读 · 0 评论 -
视图层-Search-pdd项目实现在搜索页面点击取消返回商品列表
实现在搜索面板点击取消按钮返回商品列表定义数据在搜索主面板Search.vue中定义一个数据设置搜索面板显示隐藏,并通过指令v-if给搜索面板<template> <div class="search"> <!--搜索框--> <search-nav/> <!--商品分类--> <shop/> <!--点击搜索框跳转的面板--> <search-panel v原创 2020-11-15 00:16:47 · 210 阅读 · 0 评论 -
视图层-Search-pdd项目实现搜索页面左右联动滚动
左右联动滚动项目源码地址https://github.com/zhou-X-boy/Vue_study/tree/master/VueProject/pdd定义数据在Shop.vue组件中定义数据1:右侧列表滑动的Y轴坐标2:右侧所有分类的头部位置<template>//见源码</template><script>//1:引入vuex中从服务器端发送过来的数据,也就是state.js中的数据import { mapState} from '原创 2020-11-15 00:16:10 · 195 阅读 · 0 评论 -
视图层-Search-pdd项目实现搜索页面商品列表上下滚动
上下滚动项目源码地址https://github.com/zhou-X-boy/Vue_study/tree/master/VueProject/pdd使用第三方插件库better-scrollBetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。BetterScroll 是使用纯 JavaScr原创 2020-11-15 00:14:13 · 224 阅读 · 0 评论 -
视图层-pdd项目配置Vuex状态管理
配置VuexVuex是?1:Vuex是一个专为Vue.js应用程序开发的状态管理模式2:当项目比较庞大的时候,每个组件的状态比较多,为了方便管理,需要把组件中的状态抽取出来,放入Vuex中进行统一管理。作用:对项目中多个组件的共享状态进行集中式的管理(读/写)安装Vuexnpm install vuex --saveVuex图示vuex官方图示官方图示手写图示手写图示创建vuex状态管理在项目文件夹下的src文件夹中的store文件夹新建vuex状态管理原创 2020-11-15 00:12:40 · 187 阅读 · 0 评论 -
视图层-pdd项目封装Ajax请求
封装AJAX下载Ajax的axios库npm install axios新建ajax请求的JS文件在项目目录下的api文件夹下新建ajax.js请求文件api\ajax.jsajax.js文件ajax.js文件内的操作//引入axios模块import axios from 'axios'export default function ajax(url = '',params = {},type = 'GET') { //1:定义promise对象 let prom原创 2020-11-15 00:02:20 · 129 阅读 · 0 评论 -
2-pdd项目主面板搭建
主面板搭建配置路由入口文件index.js在项目目录下的src文件夹下的router文件夹下新建路由入口文件index.jssrc\ router\ index.jsindex.jsindex.js 路由入口文件// 配置完成路由后, 会自动增加了两个属性供访问使用: $router 、$route//1:引入相应的模块import Vue from 'vue'import VueRouter from 'vue-router'//引入主面板一级路由import Hom原创 2020-11-14 23:59:41 · 201 阅读 · 0 评论 -
1-pdd移动端项目搭建
Pdd项目项目搭建vue-cli脚手架基本步骤//安装vue-clinpm install -g vue-cli//基于webpack创建一个名为pdd的项目vue init webpack pddcd pdd//下载依赖包npm install//运行客户端npm run dev浏览器运行: localhost:8080项目初始化结构build (webpack相关的编译文件夹(无需改动))config原创 2020-11-14 23:54:48 · 1368 阅读 · 0 评论