做一个网站的思路(附赠商城系统源代码)

总体思路

整体思路就是一个客户看到的内容–前端，动态的数据–后端

当然一个大网站还需要考虑安全，负载均衡等问题，但是咋们目前还只是初步做一个网站（前后端分离），后续也还有很多的问题

做一个基本的网站需要基础的前端（html,css,js）和后端知识(模板语法和一个后端的框架)

当然我这里是主后端，更多的偏向于后端的知识，前端的美化等需要根据自己的需求自行学习

前端

这里可以找一个模板，免费的话我推荐模板之家

找到一个同类的前端模板（一般包括移动端和pc端：响应式）

一个全面的模板，包含了各个页面之间的跳转（后续应该都需要换成跳转链接，由后端路由接管），以及静态资源的位置的定向，这里以一个电商网站为例

我这里找的是一个电商网站的下图为解压缩后的情况

内容包括了首页，产品，购物车等多个功能

首页

后续我们会基于此对前端页面进行改造

思路也并不难理解：替换原有的图片，加上新的文字/标题，当然如果你有更好的能力，可以做出更属于你的特色

后端

介绍

后端有很多种框架可以选择，但是如果你是一个新手，建议从python的flask和django开始起手（严格来讲，flask更简单，但是很多功能扩展起来十分费劲，如果你希望本身具备很多功能，django是个不错的选择，而flask是一个更轻量级的框架，功能少的同时拓展的功能却也足够的多）

职能

后端的功能就是，提供数据，本次我们使用django作为后端框架

django集成了orm系统，可以使用自带的model进行数据库的管理（如果你本地有数据库，可以直接生成对应的model类，没有的话也可以写model让python自动生成–总之你只需要用一次力，之后它会给你安排），减少代码量的同时，减少了管理的难度

本次的数据库也并不复杂，就是一个基本的用户表和一个基本的商品表
一下为两个model的代码，均写在models内

from django.db import models

# Create your models here.
class User(models.Model):
    user_id = models.AutoField(verbose_name="id",primary_key=True)
    name = models.CharField(verbose_name="姓名",max_length=60)
    AMDMINL_CHOICES = (
        (0, '管理员'),
        (1, '用户'),
    )
    roles = models.IntegerField(choices=AMDMINL_CHOICES,default=1,verbose_name="身份")
    password =  models.CharField(verbose_name="姓名",max_length=60)
    phone = models.CharField(verbose_name="电话",max_length=60)
    address = models.CharField(verbose_name="地址",max_length=128)
    sex = models.CharField(verbose_name="性别",max_length=4)

    class Meta():
        db_table = "user"
        verbose_name="用户"
        verbose_name_plural="用户"
    def __str__(self):
        return self.name

# Create your models here.

class Goods(models.Model):
    good_id = models.AutoField(verbose_name="商品id",primary_key=True)
    good_name = models.CharField(verbose_name="商品名称",max_length=60)
    good_iamge = models.CharField(verbose_name="商品照片",max_length=260)
    good_introduce = models.CharField(verbose_name="商品详情",max_length=60)
    good_price = models.IntegerField(verbose_name="商品价格")
    good_stock = models.IntegerField(verbose_name="商品库存")
    good_type = models.CharField(verbose_name="商品类型",max_length=200,default="肤用")
    class Meta():
        db_table = "goods"
        verbose_name="商品"
        verbose_name_plural="商品"
    def __str__(self):
        return self.good_name

自己制造好数据后就数据就好了（后续我们在需要的地方就可以直接使用了）

这里是一次过滤特定id商品数据的案例

data = models.Goods.objects.filter(good_id=id)

当然这里是需要一部分django的orm系统使用的基础的，这样就可以灵活地获取到数据

前后端交互

前端提供页面，后端提供数据，前后端分离通常两边都是框架，使用axios或者ajax或者其他的组件向后端发送网络请求，我们这里前后端不分离更多的使用模板语法，直接由后端指定html页面并进行数据的传送，前端使用模板语法将数据放到合适的位置上

比如购物车

后端

def cart(request):
    cart = request.session.get("cart")
    # print(cart)
    return render(request, "goods/cart.html", {'cart': cart})

前端（这里需要掌握基本模板语法的知识）

{% extends 'goods/base.html' %}
{% load static %}
{% block content %}
<!--------------Cart Items details--------------->
<div class="small-container cart-page">

   <table>
       <tr>
           <th>产品</th>
           <th>数量</th>
           <th>总价</th>
       </tr>
        {% for item in cart %}
       <tr>
           <td>
               <div class="cart-info">
                   <img src="{% static 'images/' %}{{ item.data.0.2 }}">
                   <div>
                       <p>{{ item.data.0.1 }}</p>
                       <small>Price: ${{ item.data.0.4 }}</small><br>
                       <a onclick="lessen({{ item.id }})">Remove</a>
                   </div>
               </div>
           </td>
           <td><input type="number" disabled class="number" id="{{ item.id }}" value="{{ item.count }}">
            <span class="btn" onclick="add({{ item.id }})" style="margin: 0;padding: 10px">+</span>
            <span class="btn" onclick="sub({{ item.id }})" style="padding: 10px;">-</span>
           </td>


           <td id="{{ item.id }}">${{ item.total }}</td>
       </tr>
       {% endfor %}
   </table>

    <div class="total-price">
        <table>
            <tr>
                <td>Total</td>
                <td>${{ request.session.total }}</td>
            </tr>

        </table>
    </div>
    <div class="total-price">
        <a href="/settle_accounts/" class="btn">确认订单 &#8594;</a>
    </div>

</div>
{% endblock %}

就这样前后端连接了起来

​

总结

这里只是总结了基本的网站所需要的基本的东西，属于一个入门级的东西

完整的系统包括登录注册等功能，基本商城功能–商品浏览，加购物车，结账，商品搜索，数据多的页面实现了分页，需要的git自取