用户登录功能实现(web登录、App【vue】登录)

**

Web登录

**
1、 写一个登录界面,并为其写上js
用户登录功能实现(web登录、App【vue】登录)_第1张图片
用户登录功能实现(web登录、App【vue】登录)_第2张图片

2、 后端代码(python)
#进入登录界面

@app.route("/")
def login():
    return render_template('login.html')

#获取表单提交的数据,并返送结果

@app.route("/dologin",methods=["post"])
def dologin():
   sch_num= request.form['sch_num']
   password= request.form['password']
   sql="select a.name,a.sch_num,a.password,a.status,b.role_id from viewer a left join user_link b on a.sch_num=b.sch_num where a.sch_num='{}'"
   sql=sql.format(sch_num)
   db = pymysql.connect(hostName, userName, userPassword, dbName)
   _cursor = db.cursor()
   user=None
   try:
      _cursor.execute(sql)
      user = _cursor.fetchone()
   except:
      print('出错啦')
   _cursor.close()
   db.close()

   # 处理数据
   # A、判断用户名是否存在

   if (user == None):
      return render_template('login.html', msg="用户名不存在")

   # B、判断密码是否正确

   if (user[2]!=password):
      return render_template('login.html', msg="密码不正确")

   # C、判断状态是否可用

   if (user[3]!= 1):
      return render_template('login.html', msg="账号已被锁定,请联系管理员")

   # D、登录信息写入session

   session['isLogin'] = 'Y'
   session['userInfo'] = user
   return redirect(url_for("index")) 

运行结果:
用户登录功能实现(web登录、App【vue】登录)_第3张图片
存储:
用户登录功能实现(web登录、App【vue】登录)_第4张图片
=>这里还可以在手机里写一个小的数据库(但是有大小限制)

**

App登录

**
Login.vue




Python
注意要在开头import json 以及跨域访问:
在这里插入图片描述

DoLoginJson主体代码:

@app.route("/doLoginJson",methods=['post'])
def doLoginJson():
   #获取参数
   data = request.get_data()
   json_data = json.loads(data.decode('utf-8'))  #json转化为对象
   sch_num = json_data.get('sch_num')
   password = json_data.get('password')
   sql="select a.name,a.sch_num,a.password,a.status,b.role_id from viewer a left join user_link b on a.sch_num=b.sch_num where a.sch_num='{}'"
   sql=sql.format(sch_num)
   db = pymysql.connect(hostName, userName, userPassword, dbName)
   _cursor = db.cursor()
   user=None
   try:
      print(sql)
      print(sch_num)
      print(password)
      _cursor.execute(sql)
      user = _cursor.fetchone()
      print(user[2])
   except:
      print('出错啦')
   _cursor.close()
   db.close()
   # 处理数据
   # A、判断用户名是否存在
   if (user == None):
      d = { "status":"N","msg":"用户名不存在" }
      return json.dumps(d,ensure_ascii=False)
   # B、判断密码是否正确
   if (user[2]!=password):
      d = { "status": "N", "msg": "密码错误" }
      return json.dumps(d, ensure_ascii=False)
   # C、判断状态是否可用
   if (user[3]!= 1):
      d = { "status": "N", "msg": "账号已被锁定,请联系管理员" }
      return json.dumps(d, ensure_ascii=False)
   # D、登录信息写入session
   d = { "status":"Y","msg": "登陆成功","data":user }
   return json.dumps(d,ensure_ascii=False)

如遇以下错误:注意vue中axios是否为post ,python中是否methods=[‘post’]
用户登录功能实现(web登录、App【vue】登录)_第5张图片

运行结果:
用户登录功能实现(web登录、App【vue】登录)_第6张图片用户登录功能实现(web登录、App【vue】登录)_第7张图片
用户登录功能实现(web登录、App【vue】登录)_第8张图片
用户登录功能实现(web登录、App【vue】登录)_第9张图片

数据传递总结:
用户登录功能实现(web登录、App【vue】登录)_第10张图片

你可能感兴趣的:(Vue,Study,用户登录,Web登录,APP登录,vue登录)