基于Node.js+MySQL开发的开源微信小程序商城(微信小程序)部署环境

在网上搜到小程序设计的项目,下载前辈的代码到本地环境,接下来需要如何部署代码到本地,并能够看到完整的效果展示。

服务器端: https://github.com/tumobi/nideshop

NideShop商城(服务端)

  • 界面高仿网易严选商城(主要是2016年wap版)
  • 测试数据采集自网易严选商城
  • 功能和数据库参考ecshop
  • 服务端api基于Node.js+ThinkJS+MySQL
  • 计划添加基于Vue.js的后台管理系统、PC版、Wap版

本项目需要配合微信小程序端使用,GitHub: https://github.com/tumobi/nideshop-mini-program

本地开发环境配置

  • 克隆项目到本地
git clone https://github.com/tumobi/nideshop
  • 创建数据库nideshop并导入项目根目录下的nideshop.sql
CREATE SCHEMA `nideshop` DEFAULT CHARACTER SET utf8mb4 ;

注意数据库字符编码为utf8mb4

  • 更改数据库配置 src/common/config/database.js
const mysql = require('think-model-mysql');

module.exports = {
    handle: mysql,
    database: 'nideshop',
    prefix: 'nideshop_',
    encoding: 'utf8mb4',
    host: '127.0.0.1',
    port: '3306',
    user: 'root',
    password: '你的密码',
    dateStrings: true
};
  • 填写微信登录和微信支付配置 src/common/config/config.js
// default config
module.exports = {
  default_module: 'api',
  weixin: {
    appid: '', // 小程序 appid
    secret: '', // 小程序密钥
    mch_id: '', // 商户帐号ID
    partner_key: '', // 微信支付密钥
    notify_url: '' // 微信异步通知,例:https://www.nideshop.com/api/pay/notify
  }
};
  • 安装依赖并启动
npm install
npm start

访问http://127.0.0.1:8360/
详细步骤

1.导入数据:
1.先安装一个Mysql数据库,可以在网上直接下载,也可以使用wampServer:http://www.wampserver.com/ 傻瓜式安装。

安装成功:启动会出现如下的图标。

此时打开把鼠标悬浮到此图标上,打开phpmyadmin,执行下面的命令,创建“nideshop”数据库

并导入项目根目录下的nideshop.sql。

数据导入成功:

2.安装基于nodejs的服务端代码:

打开终端命令窗口:开始图标- cmd

1. 输入 git clone https://github.com/tumobi/nideshop

2. 修改配置文件

更改数据库配置 src/common/config/database.js
const mysql = require('think-model-mysql');

module.exports = {
    handle: mysql,
    database: 'nideshop',
    prefix: 'nideshop_',
    encoding: 'utf8mb4',
    host: '127.0.0.1',
    port: '3306',
    user: 'root',
    password: '你的密码',
    dateStrings: true
};
填写微信登录和微信支付配置 src/common/config/config.js 此处可以先不填写,为空
// default config
module.exports = {
  default_module: 'api',
  weixin: {
    appid: '', // 小程序 appid
    secret: '', // 小程序密钥
    mch_id: '', // 商户帐号ID
    partner_key: '', // 微信支付密钥
    notify_url: '' // 微信异步通知,例:https://www.nideshop.com/api/pay/notify
  }
};

 

等待下载代码到本地文件夹下,如果下载完毕,cd  nideshop,

执行 npm install,安装依赖,安装成功,执行 npm start,启动服务端会出现如下的提示

在浏览器上访问http://127.0.0.1:8360/

 

 3.部署小程序端代码

下载小程序端代码,并新建小程序项目,把代码粘贴到项目目录下。https://github.com/tumobi/nideshop-mini-program
可成功运行:

可以打开调试器针对具体问题,去解决。

 !!!注意:

出现此错误,需要在小程序上设置不校验https这一项即可

 

转载于:https://www.cnblogs.com/cheryshi/p/10406302.html

  • 3
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UMI是一个基于React框架的可插拔企业级前端应用框架,适用于构建移动端web项目。以下是在UMI框架下搭建移动端web项目的一些步骤及注意事项。 首先,确保已经安装了最新的Node.js和npm(Node.js包管理器)。 1. 全局安装UMI: 打开终端或命令提示符,并输入以下命令进行全局安装UMI: ``` npm install -g umi ``` 2. 创建一个新的UMI项目: 在命令行中进入项目所在目录,并执行以下命令来创建一个新的UMI项目: ``` umi init ``` 3. 选择配置: 根据控制台提示,选择需要的配置,如选择React作为项目框架,选择dva(一种基于React和Redux的数据流方案)作为项目数据流方案等。 4. 安装依赖: 进入项目目录,并执行以下命令来安装项目所需的依赖包: ``` npm install ``` 5. 编写页面: 在`src`目录下创建页面文件,例如`src/pages/index.js`。使用React进行页面开发,引入所需的组件、样式等,根据项目要求进行页面布局和交互设计。 6. 运行项目: 执行以下命令来启动开发服务器,并在浏览器中查看项目效果: ``` npm start ``` 以上是使用UMI搭建移动端web项目的简要流程。在这个过程中,我们可以使用UMI提供的插件来简化开发,包括路由管理、状态管理、构建、部署等。同时,UMI还支持按需加载、自动刷新、单元测试等功能,可以帮助我们更高效地开发移动端web项目。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值