基于Vue的网上购药系统

介绍

这个是本人的毕设。有两个用户，一个是注册用户，一个是管理员用户。实现的功能有注册、登陆、轮播图、模糊搜索、分页、商品分类、商品详情、评分与评论（未考虑周全，登陆就可对商品评论）、购物车（其中购买功能未完善，只有购买成功提示）、后台管理（用于管理员对药品进行增删改查操作，上架商品中的图片需是478*225格式的，不然会超出详情外）
部分功能不完善，但是基本功能都是有的。

使用框架

本购药系统采用前后端分离，对前端部分和后端部分进行分别操作，其中：
前端：用Vue-cli搭建，使用Vue全家桶+element-ui
后端：Node.js的express框架
数据库：MySQL

前期准备

安装Vue.js的相关组件
安装Node.js的相关组件
安装mysql
安装navicat（数据库可视化工具）
安装IDEA（其他可编程程序软件皆可）

项目结构截图及说明

pic：为收集的一些样例图，可参考替换
web-client：前端部分代码
web-server：后端部分代码
web-shop.sql:mysql的文件，可在navicat中导入

运行前，需对web-server下的db.js文件和src下的config.js进行代码修改，将里面的数据库、密码修改为自己的

db.js代码为以下：

import mysql from 'mysql'
import config from '../src/config'

const  conn = mysql.createConnection({
    host:"localhost", // 数据库的地址
    user: "root", // 账号
    password: "123456", // 密码
    database: "web_shop", // 数据库名称
    multipleStatements: true,  // 允许多条sql同时查询
});

conn.connect();

export default conn;

src/config.js代码

import {join} from 'path'

export default {
	viewsPath: join(__dirname, '../views'),  
	publicPath: join(__dirname, '../public'),
	uploadsGoodsPath: join(__dirname, '../public/uploads'),  // 上传的图片所放置的文件夹
	uploadsAvatarPath: join(__dirname, '../public/avatar_uploads'),  // 上传的头像所放置的文件夹
	port: parseInt(process.env.PORT, 10) || 3000,   // 端口号

	host: 'localhost', // 数据库的地址
  user: 'root', // 账号
  password: '123456', // 密码
	database: 'web_shop', // 数据库名称
	
	secret: '123456',  // session
	maxAge: 1000 * 60 * 60 * 6  // session保存6个小时

其中，管理员账号和密码都是admin，采用了md5加密方式。

web-client文件结构说明：
.idea:IDEA的导入生成文件，不需要管
build：webpack配置相关
cofig：配置文件
src：源文件，首页等页面在里面编写
static：静态资源，存放图片、字体等，不需要管
.babelrc：配置babel的配置文件
index.html:首页入口
.editorconfig:编辑器配置文件
.postcssrc.js：postcss配置文件
package-lock.json:定义了开发时所使用的模块依赖的版本
package.json:定义了项目所需要的各种模块，以及项目的的目的配置信息

web-server文件结构说明：
.idea:IDEA的导入生成文件，不需要管
db:数据库配置文件
public：静态资源，包括图片、css文件、js文件
routes：路由
src：对seesion和数据库等进行配置
util：随机验证码和md5加密等编写
views:存放视图文件

项目运行

客户端

cmd命令，cd /d 到web-client目录路径
npm install 安装依赖
npm run dev 运行启动客户端

服务器端

cmd命令，cd /d 到web-server目录路径
npm install 安装依赖
npm run dev 启动服务器端

数据库

导入web_shop.sql到navicat可视化工具

项目源码

https://gitee.com/spring-in-huangxian-county/webshop