jquery导入数据_Web技术——简单的数据库编程

删删减减,修修补补,把我仅有的一点知识储备都全拿出来了。。。做的极度简单,并发、时序以及回滚等这种高端操作木有涉及(再次diss我自己的知识量),主要也没有专门深入研究这一块啦。。。好啦,不说废话了,进入正题:


一、实验情景

开发用户注册和登录模块,不同的用户对数据库有不同的操作权限(浏览和编辑数据库)。(提示:在注册时将有关信息保存到数据库中,当再次登录时,根据用户输入的用户名和密码在数据库中查找,不同的用户给出不同的页面进行操作。)

二、开发目标

以开发不同权限级别的管理员为例展开,root权限管理员可以增加和删除普通权限管理员,而普通权限管理员只能查看当前系统中所存在的管理员列表。

三、开发平台

  1. 选取的开发平台为:Pycharm 2016 professional
  2. 服务器端编程语言采用python(解释器为:python2.7.13)
  3. 客户端主要用到的是jquery 和ajax
  4. 数据库采用的是mysql 5.7.12

四、开发步骤

  1. 首先编写主页的html,需要一个form框输入管理员账号和密码信息。在此只列出主要元素,界面布局详见index.html。
  2. Form框主要元素
  • 两个输入框
<
  • 两个提交按钮,其中,登录由于要返回登录后页面,所以为form添加action,登录页面按钮的属性设置为submit.
<
  • 界面效果图(采用火狐浏览器打开)

5e70a8660a098f414db60abca2147bba.png

3. Form框响应事件

  • Form表格动作(为登录设置,注册则采用jquery脚本的按钮响应方式,只需返回alert框)
<
  • 输入用户名和密码完成注册功能(正确输入/错误输入)

cf3516ed2e328f009a6d9dcadbbf1fd5.png
  • 注册成功提示框出现后后再次点击登录,弹出框提示管理员已经存在这种错误。

6a97ddf2adc28623660cf028f468474d.png

025a8dd3dc8f666b2260197cb99a56b2.png

33a4576cf29649328be874b84a34f300.png
  • 部分脚本的实现

c32baf5cb56d068f5107083999fb522e.png
  • 普通管理员登录后界面如下(只可以查看当前存在的管理员用户)

478b7499701d72da048dc48a5ea911fc.png

4. 编写root管理员和普通管理员的操作界面,其中,root管理员界面需要增加添加和删除普通管理员的对应按钮

  • Root管理员多出的按钮(添加和删除按钮)
<
  • Root管理员多出的模态框(部分代码,详见root_home.html页面
<
  • 按钮响应事件
<

5. 对运行结果进行截图:

  • 以root用户的账户登录

4559e6c9327adbb31b27764b57d453d0.png
  • 成功登录后转到如下界面(可以添加新的管理员,看到管理员信息)

ff057a507b69a468c0d969af75e838f4.png
  • 添加管理员,处理错误提示(信息的校验功能类似注册时的校验,错误提示输出也类似,再次不做赘述)

bc12581e1819f4f6b094034a8441ae59.png
  • 点击添加后可看到列表里多了一项记录,如下所示:

780fe9106960338d5500e004b68885f4.png
  • 点击删除按钮,测试删除功能

d9bbe389863a4ff693dc865dacf6e839.png

删除后页面如下所示:

7b2cf37cfa3e9d99debd275c45fd245b.png

5. 使用sql语言编写存储过程,包括建立manager表,增加/删除/获得manager表的有关信息。

1)设置数据库参数

ee8c13229c3a379821789cc0601ca6d8.png

2)编写存储过程(部分存储过程如下所示)

-- 

3)编写服务端相应代码,包括管理员的注册、登录验证、以及增加/删除操作。

4)服务器端主要流程如下:

  • 判断会话是否有效
  • 接收客户端发来的数据
  • 查询数据库并进行数据处理
  • 返回操作结果给客户端

5)一个实例如下所示(用python+flask架构来实现):

cd1909ddfb97e39b6a14c4c0f006bf9c.png

6)建立manager 数据库,并导入manager.sql的脚本文件

7) 建立数据库操作比较简单,不做赘述。如下图所示:

a84aa98c1ec7f3defff4e3a5daab1f78.png

8) 运行服务器,对代码进行测试。效果截图为了报告的完整性放在了第一部分,详见步骤1。(所有东西均打包在了工程ex6中,脚本manager.sql放入了ex6的文件夹下)

五、干货总结

Web开发是多种技术综合运用的体现,如何获取这些技术并优化使用这些技术,进行高效便捷的Web开发是非常值得探究的一个问题。一些web开发的常识如下所示:

  1. 利用js可以完成大部分客户端验证,能大大降低服务器的压力。因此,在Web开发中,合理的利用js做一些基础性的处理工作就显得尤其重要。此外,js网页的动态显示需要依靠js脚本来完成,可以说,是js使网页动起来。
  2. js赋予了网页动态的特性,但网页不具有记忆性,在网页上输入或输出的信息在下次打开网页时就会消失。因此,要长久的保存网页的有关信息,必须使用数据库。
  3. 最开始研究web技术时,找到了一个非常好的学习网站W3C School和菜鸟教程,里边的资料十分详细。在找到了合适的资料后,我就花了一些时间把网上的教程都过了一遍。虽然例子都比较简单,但熟练掌握一些简单的运用后,自己探索起复杂的运用时效率就会更高。
  4. Web开发技术很多,如何选择适合自己的开发技术就成了需要解决的问题。每个人擅长的东西并不一样,因此,在开发过程中要扬长避短,发挥自己最大的优势。
  5. 任何技术光说不练都是学不会的,最主要还是要自己积极主动的去做,并且不断尝试改变,在这个过程中不断提升自我。

下一篇文章将会写一点有关Web的课程设计,可以完成的课设包括软件工程、数据库、Web技术。。。其实技术和实现原理是差不多的,只要搞懂一个,剩下的就是照着来。不过笔者水平有限,实现的网站也是超级基础的,离商用还差十万八千里,也没有用到什么高端的技术.....就当成是课设入门交流好了,多学点东西总是有用的,就酱~You can get my code on my github:

KristinKong/Web-Mysql​github.com
b85e18b237d999ca3061e1058199db8c.png
参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值