Django图书商城项目/图书管理/毕业设计

1.创建项目BookStore

2.连接本地MYsql数据库

创建的数据库名为bookstore

3. 配置静态资源Static

settings.py

创建static文件夹，子目录存放css、js、img、html静态资源

4.配置首页路由

这里配置商城首页为打开后就跳转到首页，方便一些 urls.py

4.1编写首页视图

默认没有视图文件，在bookstore文件夹下创建views.py文件

4.2编写首页模板

在templates文件夹下创建BookStore文件夹，存放待渲染的html文件

写入首页需要的代码，完成！看看效果

首页需要传入图书的数据，用于显示在主页

4.3注册应用并编写图书模板

在Terminal终端中执行创建应用的代码

python manage.py createapp AddShopCard

应用名随便取的，主要是为了创建模板并迁移数据库
创建完成后会有一个AddShopCard文件夹，这时应用已经注册完成了，不过我们还需要在settings.py中注册我们的应用

接下来就是编写模板了

书名，作者，价格，图书链接，四个字段

4.4迁移数据库

python manage.py migrate

执行上面的代码，数据库中对应的数据表级生成啦！

接下来导入图书数据

这里的图片链接是放在图片托管平台的

4.5 编写主页视图代码

from django.http import HttpResponse
from django.shortcuts import render, redirect
import pymysql, json

db = pymysql.connect(
    host='localhost',
    user='root',
    Password='021413',
    port=3306,
    charset='utf8',
    database='bookstore'
)
cursor = db.cursor()


def index(request):
    sql = 'select * from addshopcard_bookinfo'
    cursor.execute(sql)
    data = cursor.fetchall()
    List3 = ['no']
    return render(request, '../templates/BookStore/index.html', {"List3": json.dumps(List3), 'bif': data})

看看效果

图书成功显示在了主页，很奈斯

既然是商城，就需要登录，用户界面，还得有管理界面，数据库增删改查四部曲基本操作

5.用户登录

path('accountLogin/', accountLogin),  # login

这里是配置的登录路由，返回用户登录的界面

# 验证用户
def accountLogin(request):
    username = request.POST.get('username')
    password = request.POST.get('password')
    sql = 'SELECT * from addshopcard_userinfo where userName="{}"'.format(username)
    cursor.execute(sql)
    info = cursor.fetchone()
    sql = 'select * from addshopcard_bookinfo'
    cursor.execute(sql)
    data = cursor.fetchall()
    if info is not None:
        print('---账户验证---')
        print('表单数据：' + username + password)
        print('数据库数据:' + info[1] + info[2])
        global U
        U = info[1]
        P = info[2]
        List = ['ok', U]
        List2 = ['ok', U, P]  # username and password
        if username == U and password == P:
            List3 = ['yes']
            return render(request, '../templates/BookStore/index.html',
                          {'List': json.dumps(List), 'List2': json.dumps(List2), 'List3': json.dumps(List3),
                           'bif': data})
        else:
            return render(request, '../templates/BookStore/backPage.html', context=None, content_type=None)
    else:
        return render(request, '../templates/BookStore/backPage.html')

html源码就不展示了，看看效果，我将登录的页面放在主页一起的，不过需要点击登录才会弹出来

5.1用户注册

有登录，就有注册

这里配置的是两个路由用于注册

RegisterPage用户点击注册跳转到注册界面，Register用于讲输入的注册信息验证并保存到数据库中
所以我们需要一个用户信息数据表

5.2用户信息表

class UserInfo(models.Model):
    id = models.AutoField(primary_key=True)
    userName = models.CharField(max_length=20, verbose_name='用户名')
    password = models.CharField(max_length=20, verbose_name='密码')
    sex = models.CharField(max_length=4, verbose_name='性别')
    age = models.IntegerField( verbose_name='年龄')
    location = models.CharField(max_length=30, verbose_name='地区')
    vip = models.CharField(max_length=10, verbose_name='用户等级')
    money = models.IntegerField(default=1000, verbose_name='余额')

    def __str__(self):
        return self.userName

    class Meta:
        verbose_name = 'UserInfo'

建立模型，执行迁移命令
这里讲解一下用户表的字段含义
vip指的是用户的权限，0代表普通用户，1代表管理员，我设想的是用户分等级，普通用户仅能浏览网页，添加购物车等操作，管理员可修改添加删除图书数据，就不用django自带的后台管理，更银杏化。

5.3 用户注册界面及其视图

这里是注册界面完成后的效果，数据的提交是通过表单的方式传递，再到视图中get出来，与数据库的信息进行匹配验证，不存在就执行注册，存在便返回用户已存在的提示信息。

# register
def Register(request):
    username = request.POST.get('username')
    password = request.POST.get('password')
    print(username, password)
    sql = 'SELECT userName from addshopcard_userinfo where userName="{}"'.format(username)
    cursor.execute(sql)
    print(sql)
    UserNames = cursor.fetchone()
    print(UserNames)
    if UserNames is None:
        sql = 'INSERT into addshopcard_userinfo(userName,password)  VALUES(%s,%s)'
        args = [username, password]
        cursor.execute(sql, args)
        db.commit()
        return render(request, '../templates/BookStore/backPage.html')
    else:
        print(username + '--已存在的名称')
        result = ['exist', username]
        return render(request, '../templates/BookStore/register.html', {'result': json.dumps(result)})

返回“用户已存在”的提示信息是通过json的方式传递到页面js中，再用js呈现到页面上显示。

登录过后可以查看用户自己的信息，即用户主页

5.4用户中心

这里是用户中心的页面效果，管理员可以进入图书管理，普通用户则无。

5.5用户中心的路由及其视图

·路由

path('UserCenter/', UserCenter),

·视图

def UserCenter(request):
    sql = 'select userName,sex,age,location,vip,money from addshopcard_userinfo where userName="{}"'.format(U)
    cursor.execute(sql)
    a = cursor.fetchone()
    if a[4] == '1':
        vip = '管理员'
    else:
        vip = '普通用户'
    con = {
        'username': a[0], 'sex': a[1], 'age': a[2], 'location': a[3], 'vip': vip, 'money': a[5]
    }
    return render(request, '../templates/BookStore/login.html', con)

6.图书管理中心

这里是图书管理中心的最终效果，图书管理需要有增加删除修改的功能

这个页面用到了大量的JS，点击修改，弹出修改窗口，并且根据图书的位置来弹出窗口，点击增加，弹出增加图书窗口。


附上图书管理主页的视图代码：

#读取数据，并传递到管理页面中，方法跟主页差不多
def BookInfo(request):
    sql = 'select * from addshopcard_bookinfo'
    cursor.execute(sql)
    data = cursor.fetchall()
    bif = {'bif': data}
    return render(request, '../templates/BookStore/manage.html', bif)

编辑功能代码：

def edit(request):
    try:
        getID = request.POST.get('ids')
        ID = getID.replace('ID:', '')
        name = request.POST.get('name')
        writer = request.POST.get('writer')
        price = request.POST.get('price')
        re = '修改图书信息：' + ID +'\t'+ name +'\t'+ writer +'\t'+ price
        print(re)
        if name is not None and writer is not None and price is not None:
            args = [name, writer, price, ID]
            sql = '''
            UPDATE addshopcard_bookinfo set bookName=%s,writer=%s,price=%s where id=%s
            '''
            cursor.execute(sql, args)
            db.commit()
            return render(request, '../templates/BookStore/backPage.html')
        else:
            return HttpResponse('请输入完整信息！')
    except Exception as e:
        print('-->异常{}'.format(e))
        return render(request, '../templates/BookStore/backPage.html')

删除功能代码：

def delete(request):
    bookId = request.GET.get('id')
    print('被删除图书id:{}'.format(bookId))
    sql = 'delete from addshopcard_bookinfo where id=%s'
    args = [bookId]
    cursor.execute(sql, args)
    db.commit()
    sql = 'select * from addshopcard_bookinfo'
    cursor.execute(sql)
    data = cursor.fetchall()
    bif = {'bif': data}
    return render(request, '../templates/BookStore/manage.html', bif)

新增图书代码：

def addBook(request):
    name = request.POST.get('name')
    writer = request.POST.get('writer')
    price = request.POST.get('price')
    src = request.POST.get('src')
    args = [name, writer, price, src]
    sql = 'insert into addshopcard_bookinfo(bookname,writer,price,imgSrc) values(%s,%s,%s,%s)'
    cursor.execute(sql, args)
    db.commit()
    sql2 = 'select * from addshopcard_bookinfo'
    cursor.execute(sql2)
    data = cursor.fetchall()
    bif = {'bif': data}
    return render(request, '../templates/BookStore/manage.html', bif)

6.1管理页面的弹出式窗口

上一讲已经说了编辑功能的代码是弹出式的，需要用到大量的JS

JS定位点击按钮的位置

    function where(event) {
        let x,y;
        let e = event || window.event;
        const scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        const scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        x = e.clientX;
        y = e.clientY;
        console.log(x+'--'+y);
        let editBox = document.querySelector('.edit');
        editBox.style.left = scrollX+x+'px';
        editBox.style.top = scrollY+y-18+'px';
        editBox.style.display='flex';
    }

点击编辑按钮后，执行命令，将编辑窗口显示出来，并更改位置，且编辑窗口传入了被编辑图书的ID，便于后台进行数据修改。

7.购物车

这个东西，我没写完善，就一个空壳，能看，不中用

我放在主页的，默认是隐藏的，点击购物车图标后会弹出，点击图书卡片会添加到购物车中
这个购物车中的卡片其实是一个个的网页文件，被附加到购物车中的，假如有50本书，就得生成50个小卡片，比较麻烦。也没做最后的结算，时间不够啦、、、

从数据库中读取数据后，给每本书都生成一个小卡片
这里的生成是用的python的读写操作，创建xxx.html文件并读取数据库，写入对应的html代码
肯定有其他好方法，只是当时没想到，就这样做了

完整打包项目可分享