【Go语言实战】(2) Gin+Vue 电子商城-阿里云开发者社区

开发者社区> 小生凡一> 正文

【Go语言实战】(2) Gin+Vue 电子商城

简介: 目录 🎈1. 需求分析 1.1 数据获取 1.2 ⽤户操作 1.3 其他功能 1.4 拓展功能 1.5 开发环境 🎉2. 后端逻辑代码 2.1 Python - 爬虫 2.2 Golang - Gin 2.2.1 数据库部分 2.2.1 服务部分 ✨3. 前端核心代码 3.1 AXIOS前后端交互 🎊4. 部分页面展示 4.1 前台页面 4.2 后台管理 🎆5. 结语 🎇最后
+关注继续查看

目录

🎈1. 需求分析

1.1 数据获取

1.2 ⽤户操作

1.3 其他功能

1.4 拓展功能

1.5 开发环境

🎉2. 后端逻辑代码

2.1 Python - 爬虫

2.2 Golang - Gin

2.2.1 数据库部分

2.2.1 服务部分

✨3. 前端核心代码

3.1 AXIOS前后端交互

🎊4. 部分页面展示

4.1 前台页面

4.2 后台管理

🎆5. 结语

🎇最后



🎈1. 需求分析

1.1 数据获取

使⽤爬⾍爬取某⼀电商平台上部分商品信息,包括但不限于商品图⽚、价格、名称等。


1.2 ⽤户操作

顾客


注册,登录,登出

⽤户个⼈资料展示与编辑,上传头像

更改密码

商家


拥有顾客的⼀切功能

可以进⾏零⻝信息的上传(包括图⽚、价格等信息)

管理员


拥有上述⽤户的所有功能

⽤户管理

商品信息管理

1.3 其他功能

添加虚拟货币功能。

订单有过期时间

为管理员添加⼀个充值接⼝,管理员可以为某⼀⽤户加钱。

添加购物⻋和背包功能。 购买操作在购物⻋界⾯完成,完成购买后完成物品转移,以及货币转移(购买后物品⾃动下架)

背包中的物品可以由⽤户上传,但默认不在购物⻚⾯中出现,需持有者进⾏上架才能被其他⽤户购买。

1.4 拓展功能

⽀付密码

商品下评论

注意并发性

1.5 开发环境

后端:Python v3.8 、Golang v1.15


数据库:MySql v5.7.30、Redis v4.0.9


文件存储 :七牛云存储


支付接口:支付FM


🎉2. 后端逻辑代码

2.1 Python - 爬虫

数据库表

class product_img_info(Base):
    __tablename__ = 'product_param_img'  # 数据库中的表名
    id = Column(Integer, primary_key=True, autoincrement=True)
    name = Column(String(), nullable=False)
    title = Column(String())
    category_id = Column(String())
    product_id = Column(String())
    info = Column(String())
    img_path = Column(String())
    price = Column(String())
    discount_price = Column(String())
    created_at = Column(DateTime, default=datetime.now)
    updated_at = Column(DateTime, default=datetime.now)
    deleted_at = Column(DateTime, default = None)

    def __repr__(self):
        return """
            <product_img_info(id:%s, product_id:%s>
        """ % (self.id,self.product_id)

爬取操作

def getHTMLText(url):
    try:
        header = {
            'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36',
            'cookie': '' # 到浏览器复制cookie
        }
        r = requests.get(url, timeout=30, headers=header)
        r.raise_for_status()
        r.encoding = r.apparent_encoding
        # print(r.text)
        return r.text
    except:
        return ""
def parsePage(html):
    view_prices = re.findall(r'\"view_price\"\:\"[\d\.]*\"', html)
    view_fees = re.findall(r'\"view_fee\"\:\"[\d\.]*\"', html)
    raw_titles = re.findall(r'\"raw_title\"\:\".*?\"', html)
    titles = re.findall(r'\"title\"\:\".*?\"', html)
    user_ids = re.findall(r'\"user_id\"\:\"[\d\.]*\"',html)
    pic_urls = re.findall(r'\"pic_url\"\:\".*?\"',html)
    detail_urls = re.findall(r'\"detail_url\"\:\".*?\"',html)
    for view_price,view_fee,title,raw_title,user_id,pic_url,detail_url in zip(view_prices,view_fees,titles,raw_titles,user_ids,pic_urls,detail_urls):
        price=eval(view_price.split(':')[1])
        discount_price=eval(view_fee.split(':')[1])
        name=eval(title.split(':')[1])
        a4=eval(raw_title.split(':')[1])
        product_id=eval(user_id.split(':')[1])
        img_path=eval(pic_url.split(':')[1])
        persopn = product_img_info(name=name,title=name,product_id=product_id,category_id="6",info=name,img_path=img_path,price=price,discount_price=discount_price)
        session.add(persopn)  # 增加一个
        session.commit() # 提交到数据库中
# 1手机 2女装 3电脑 4杯子 5零食 6耳机
def main():
    goods = '耳机'
    depth = 1
    start_url = 'https://s.taobao.com/search?q=' + goods
    for i in range(depth):
        try:
            url = start_url + '&s=' + str(44 * i)
            html = getHTMLText(url)
            parsePage(html)
        except:
            continue
if __name__ == '__main__':
   # Base.metadata.create_all()       # 创建表需要执行这行代码,如果表存在则不创建
    #sqlOperation()
    main()

2.2 Golang - Gin

2.2.1 数据库部分

部分数据库建设


用户模型

//User 用户模型
type User struct {
    gorm.Model
    UserName       string `gorm:"unique"`
    Email          string //`gorm:"unique"`
    PasswordDigest string
    Nickname       string `gorm:"unique"`
    Status         string
    Limit          int   // 0 非管理员  1 管理员
    Type           int    // 0表示用户  1表示商家
    Avatar         string `gorm:"size:1000"`
    Monery         int
}

商品模型

//商品模型
type Product struct {
    gorm.Model
    ProductID     string `gorm:"primary_key"`
    Name          string
    CategoryID    int
    Title         string
    Info          string `gorm:"size:1000"`
    ImgPath       string
    Price         string
    DiscountPrice string
    OnSale     string
    Num     int
    BossID        int
    BossName      string
    BossAvatar    string
}

2.2.1 服务部分

部分逻辑代码


增加商品

func (service *UpProductService) UpProduct() serializer.Response {
    var product model.Product
    code := e.SUCCESS
    err := model.DB.First(&product,service.ID).Error
    if err != nil {
  logging.Info(err)
  code = e.ErrorDatabase
  return serializer.Response{
    Status: code,
    Msg:    e.GetMsg(code),
    Error:  err.Error(),
  }
    }
    product.OnSale = service.OnSale
    err = model.DB.Save(&product).Error
    if err != nil {
  logging.Info(err)
  code = e.ErrorDatabase
  return serializer.Response{
    Status: code,
    Msg:    e.GetMsg(code),
    Error:  err.Error(),
  }
    }
    return serializer.Response{
  Status: code,
  Data:   serializer.BuildProduct(product),
  Msg:    e.GetMsg(code),
    }
}

修改商品

//更新商品
func (service *UpdateProductService) Update() serializer.Response {
    product := model.Product{
  Name:          service.Name,
  CategoryID:    service.CategoryID,
  Title:         service.Title,
  Info:          service.Info,
  ImgPath:       service.ImgPath,
  Price:         service.Price,
  DiscountPrice: service.DiscountPrice,
  OnSale:     service.OnSale,
    }
    product.ID = service.ID
    code := e.SUCCESS
    err := model.DB.Save(&product).Error
    if err != nil {
  logging.Info(err)
  code = e.ErrorDatabase
  return serializer.Response{
    Status: code,
    Msg:    e.GetMsg(code),
    Error:  err.Error(),
  }
    }
    return serializer.Response{
  Status: code,
  Msg:    e.GetMsg(code),
    }
}

✨3. 前端核心代码

3.1 AXIOS前后端交互
import axios from 'axios'
// 创建商品
const postProduct = form =>
    axios.post('/api/v1/products', form).then(res => res.data)
// 读商品详情
const showProduct = id =>
    axios.get(`/api/v1/products/${id}`).then(res => res.data)
// 读取商品列表
const listProducts = (category_id, start, limit) =>
  axios
    .get('/api/v1/products', { params: { category_id, start, limit } })
    .then(res => res.data)
   
//读取商品的图片
const showPictures = id => axios.get(`/api/v1/imgs/${id}`).then(res => res.data)
//搜索商品
const searchProducts = form =>
    axios.post('/api/v1/searches', form).then(res => res.data)
export {
    postProduct,
    showProduct,
    listProducts,
    showPictures,
    searchProducts
}

🎊4. 部分页面展示

4.1 前台页面

主页面

image.pngimage.png

商品页面


image.png


image.png

发布商品

image.png


购物车

image.png


结算页面

image.png


个人中心

image.png


4.2 后台管理

用户管理

image.png

商品管理

image.png


🎆5. 结语

这个商场是在作者的开源项目基础上加以改进的!

原GitHub地址:CongZ666

真的非常感谢作者的开源

让我能通过这个项目,懂得Gin+Vue前后端分离的很多知识!!

还有懂了一些如同支付功能等,之前没有做过的功能。

不过我还没搞懂极验的功能。后续再完善。


🎇最后

小生凡一,期待你的关注。





版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9473 0
「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之数据导出(十三)
本文主要介绍业务数据批量导出相关内容。针对每个业务表,有时需要导出数据到本地文件,用来备份或者分析,这里采用的文件格式为EXCEL,第一行为字段名称,从第二行开始为数据。
36 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10839 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12029 0
Vue-Router路由所有相关方法讲解(全),实战教学含登录拦截,万字长文,建议收藏
Vue-Router路由所有相关方法讲解(全),实战教学含登录拦截,万字长文,建议收藏
15 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13151 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11493 0
【mock】后端不来过夜半,闲敲mock落灯花 (mockjs+Vuex+Vue实战)
mock的由来【假】   赵师秀:南宋时期的一位前端工程师 诗词背景:在一个梅雨纷纷的夜晚,正处于项目编码阶段,书童却带来消息:写后端的李秀才在几个时辰前就赶往临安度假去了,!此时手头仅有一个简单的数据接口文档的赵师秀慨叹一声:"好吧,那还是我自己先模拟一下后端的接口吧"   _(:...
1285 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
6882 0
+关注
小生凡一
你好呀!
157
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载