整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML/CSS中可直接输数据的表格

lt;table>和<form>结合效果图:

在HTML/CSS 中,我们经常用HTML来布局和填充内容,用CSS来添加效果,修饰内容和布局,使整个页面变得更好看。


HTML和CSS的配合方法:

即在<head></head>标签内添加CSS样式表的链接:

代码展示如下:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Make a Table Frame</title>
 <link rel="stylesheet" type="text/css" href="CSS/tableframe.css" >
</head>

CSS选择器

定义:

对带有指定属性的 HTML 元素设置样式。

注意:

只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。

功能:

“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

CSS中的选择器有三个:

标签选择器、class类选择器、id选择器

1.标签选择器样式表:a{}、 div{}、table{} ...

{对全局所有的选中类型标签的样式修改}

2.class类选择器 样式表: .class{}

{在HTML中每个标签都可以同时绑定多个类名,每个标签都可以设置class;同一个界面中class是不可重复}

3. id选择器样式表: #d1 {}

{每个标签都可有id,每个页面不可重复id,}

【一个HTML标签只能绑定一个id属性,一个HTML标签可以绑定多个class属性】

单纯选择<div>标签的时候 是对全局的的(所有的)<div>进行修饰;

选择器优先级:

id选择器>class类选择器>标签选择器

所以有id和class 选择器的标签将不会被覆盖。交叉时是按照优先级覆盖显示的。


<table>部分:电脑配件管理表2018年5月-8月

单纯的HTML 表格表单内容

标题<caption>标签:

表格的标题<caption>的内容填充(HTML)

<caption> 表格标题</caption> 

标题<caption>的样式修饰(CSS)

table.formdata caption
{
	text-shadow: #FF00ff;
	text-align: center;
	padding-bottom: 6px;
	font-weight: bold;
}

其他<table>标签相关内容可参考 HTML中表格的实例应用 一文。


<form>部分:

form在网页中主要负责数据采集功能。

一个表单有三个基本组成部分:

(1)表单标签:包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

(2)表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

(3)表单按钮:提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入。还可以用表单按钮来控制其他定义了处理脚本的处理工作。

<input>标签

定义:

<input> 标签规定用户可输入数据的输入字段。

根据不同的 type 属性,输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等

语法代码:

<input type="value" >

实例代码:

<td><input type="text" name="Mainboard 6月" id="Mainboard 6月"></td>

关系展示:


<input>中 submit属性 和reset属性

实例代码:

<p>

<input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn">

<input type="reset" value= "Reset All" class="btn">

</p>

实例展示:

<input>标签的其他属性值:


<input>标签外是否添加<form>标签?

input标签外是否添加form标签需要按情形区分:

应用场景的区别:

1.所有向后台提交数据(包括原生和ajax提交)的<input>都建议用<form>包裹.

2.如果只是用来做前台交互效果则不推荐使用form包裹。

但提交数据时,其实也可以不用form包裹input标签:

1.如果有form标签,在点击提交铵钮时,浏览器自动收集参数,并打包一个http请求到服务器,完成表单提交。在这一过程中,浏览器会根据method的不同,将参数编码后,放在urI中(get),或者放在请求的data中(post)。然后发送到服务器。

2.如果没有form,post方式的提交要使用ajax手工完成。get方式的提交需要自己拼接url。


<form>表单其他相关内容可参考 HTML中 表单 的应用实例 一文。


最后,附带一下该可输入的EXCEL表格的源码。

HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Make a Table Frame</title>
 <link rel="stylesheet" type="text/css" href="CSS/tableframe.css" >
</head>
<body image="">
 <form method="psot">
	<table border="1px" class="formdata">
 	<caption>电脑配件管理表2018年5月-8月</caption>
 	<tr>
 		<th></th>
 		<th scope="col">5月</th>
 		<th scope="col">6月</th>
 		<th scope="col">7月</th>
 		<th scope="col">8月</th>
 	</tr>
 	<tr>
 		<th scope="row">Hard Disk</th>
 		<td><input type="text" name="Hard Disk 5月" id="Hard Disk 5月"></td>
 		<td><input type="text" name="Hard Disk 6月" id="Hard Disk 6月"></td>
 		<td><input type="text" name="Hard Disk 7月" id="Hard Disk 7月"></td>
 		<td><input type="text" name="Hard Disk 8月" id="Hard Disk 8月"></td>
 	</tr>
 	<tr>
 		<th scope="row">Mainboard</th>
 		<td><input type="text" name="Mainboard 5月" id="Mainboard 5月"></td>
 <td><input type="text" name="Mainboard 6月" id="Mainboard 6月"></td>
 <td><input type="text" name="Mainboard 7月" id="Mainboard 7月"></td>
 <td><input type="text" name="Mainboard 8月" id="Mainboard 8月"></td>
 	</tr>
 	<tr>
 		<th scope="row">Case</th>
 		<td><input type="text" name="Case 5月" id="Case 5月"></td>
 <td><input type="text" name="Case 6月" id="Case 6月"></td>
 <td><input type="text" name="Case 7月" id="Case 7月"></td>
 <td><input type="text" name="Case 8月" id="Case 8月"></td>
 	</tr>
 	<tr>
 	 <th scope="row">Power</th>
 	 <td><input type="text" name="Power 5月" id="Power 5月"></td>
 <td><input type="text" name="Power 6月" id="Power 6月"></td>
 <td><input type="text" name="Power 7月" id="Power 7月"></td>
 <td><input type="text" name="Power 8月" id="Power 8月"></td>	
 	</tr>
 	<tr>
 		<th scope="row">CPU Fan</th>
 		<td><input type="text" name="CPU Fan 5月" id="CPU Fan 5月"></td>
 <td><input type="text" name="CPU Fan 6月" id="CPU Fan 6月"></td>
 <td><input type="text" name="CPU Fan 7月" id="CPU Fan 7月"></td>
 <td><input type="text" name="CPU Fan 8月" id="CPU Fan 8月"></td> 
 	</tr>
 	<tr>
 		<th scope="row">Total</th>
 		<td><input type="text" name="Total 5月" id="Total 5月"></td>
 <td><input type="text" name="Total 6月" id="Total 6月"></td>
 <td><input type="text" name="Total7月" id="Total 7月"></td>
 <td><input type="text" name="Total 8月" id="Total 8月"></td>
 	</tr>
	</table>
 <p>
 <input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn">
 <input type="reset" value= "Reset All" class="btn">
 </p>
 </form>
</body>
</html>

CSS code :

body
{
	font-family: Arial;
	/*background-image: url(image/mainroad.jpg) no-repeat;*/
	background-color: #00ff00;
	background-size: 100%;
}
table.formdata
{
	width: 300px;
	height: 150px;
	border: 2px solid #F00;
	border-collapse: collapse;
	font-family: Arial;
}
table.formdata caption
{
	text-shadow: #FF00ff;
	text-align: center;
	padding-bottom: 6px;
	font-weight: bold;
}
table.formdata th
{
	border:1px solid #be34hc;
	background-color: #E2E2E2;
	color:#000000;
	text-aglin:center;
	font-weight: normal;
	padding: 2px 8px 2px 6px;
	margin: 0px;
}
table.formdata input
{
	width: 100px;
	padding: 1px 3px 1px 3px;
	margin: 0px;
	border:none;
	font-family: Arial;
}
.btn
{
	width:100px;
	background-color: #FF00ee;
	border:1px solid #00f2f2;
	font-family: Arial;
}

本文部分内容来自网络,如有侵权,请联系修改。

django开发网页中经常会遇到需要将本地的文件上传到服务器,这里我们就需要通过post请求将数据推送到服务器上去

1 ,定义视图

def upLoadPic(request):

return render(request, 'booktest/upLoadPic.html')

2 ,定义URL

path('upLoadPic/',views.upLoadPic,name='upLoadPic'),

3 ,前台界面html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<form action="/uploadHandler/" method="post" enctype="multipart/form-data">

{% csrf_token %}

<input type="file" name="pic1">

<br>

<input type="submit" value="上传">

</form>

</body>

</html>

其实这里也就是一个表单,通过post请求提交相关的数据

从上面可以看到,当点击提交的时候.post请求会携带数据发送到 这个地址,那我在定义一个处理数据的视图

上传部分

def uploadHandler(request):

if request.method == "POST":

f1 = request.FILES['pic1']

fname = '%scar/%s'%(MEDA_PATH, f1.name)

#fname = 'static/media/car/a.png'

print(fname)

with open(fname, 'wb+') as pic:

# 根据上传的流中的数据一点一点往内存中写

for c in f1.chunks():

pic.write(c)

return HttpResponse(fname)

else:

return HttpResponse("ERROR")

配置下 URL: path('uploadHandler/', views.uploadHandler,name='uploadHandler')

注释:解释下上面的内容,当post请求携带数据传到相关的页面后,这个接收页面,

1. 首先判断是不是POST请求,表单提交一定是post请求

2. 通过request.FILES['pic1'] 拿到指定的文件 pic1是传过来的键

3. 拼接需要存放的目标地址

4. 通过with,使用二进制的写权限向指定目录中写

5. 这里的 f1.chunks()表示将数据分块写到相关位置

天是刘小爱自学Java的第156天。

感谢你的观看,谢谢你。

学习计划安排如下:

  • 开始前台门户系统的学习。
  • 今天只涉及到系统搭建,以及一些简单的介绍,并不涉及到具体的业务。
  • 明天开始进入具体的业务学习。

后台管理系统的学习就暂且告一段落了,其实无外乎就是各种增删改查。

笔记中主要是记录了查询和新增操作,关于修改和删除基本也是大同小异。

一、前台门户介绍

后台管理系统是给网站管理人员看的,前几天写的功能主要都用于对商品的管理。

管理人员通过该系统控制商品的样式啊,是否上下架,库存啊这些。

而前台门户系统是给用户看的,如下图:

现在主流电商网站的前台门户系统,基本上都是这么一个样式。

以前后台管理系统较简单,我可以在对应页面做一个修改,从而将其转换成刘小爱商城。

现在前台门户系统较为复杂,有的还涉及到图片,我一时修改不过来,索性就不改了。

但愿不会说我在打广告什么的哈哈哈,到时候被平台给屏蔽了可就不好了。

那使用到的技术是什么呢?

以前后台系统使用的是SPA(单页应用),SPA理解起来其实非常简单。

它就是只有一个html文件,其它的都是以vue组件的形式拼接,从而实现了页面切换。

SPA的好处在于速度快,但是第一次加载慢,它等于是第一次将静态资源全部加载下来了,所以后续页面切换时就非常流畅。

但是这样有一个问题,不利于SEO优化,当然还有缓存的问题,在此就不说明了。

这个SEO是啥?我大致说下,当然不可能将其说得很清楚,我自己也不太懂,但作为一名程序员对这些有一定的了解肯定是没坏处的。

比如说用户要买东西,他可能会在百度上面搜索,那百度出来的页面是如何排序的呢?

这就涉及到SEO搜索引擎优化了,如果优化好,会排在更前面。

当然最前面的肯定是直接给百度钱打广告的。

而百度搜索引擎的一个机制,是利用爬虫爬别人的网站,再显示出来。

如果只是SPA单页应用,爬虫就只能爬到一个html文件,不利于SEO搜索引擎优化。

当然做一个强调

SEO这块我也不是太了解,所以只是简单地做一个描述,自己了解的说不定也有问题。

总之SEO对于网站来说很重要,会增加搜索后的排名,使用单页应用就不太合适了。

所以前台门户系统使用多页应用

依旧是前后端分离,不过前端页面会独立多个html页面,每个页面使用vue完成渲染。

做一个总结就是:

  • 前端门户系统使用vue+Nuxt实现多页应用
  • 后台管理系统使用vue+vuetify实现单页应用

二、搭建前台系统

后台管理系统中用了webpack,很简单地就实现了热部署,这个太重要了,不像Java代码每次一改就要重启微服务,很麻烦。

而此处使用的叫live-server,其翻译过来就是“活的服务器”,很生动形象。

安装live-server

使用npm命令完成安装即可,命令如下:

npm install -g live-server

这里使用的是全局安装,以后任意位置可用。

  • npm:是Node.js的包管理工具。
  • install:也就是安装的意思。
  • -g:也就是表示全局安装,我大胆地猜测下应该就是global的首字母缩写。
  • live-server:活的服务器。

安装好了之后运行live-server,同时可以使用命令指定端口:

命令:live-server --port=9002

port即端口的意思,我们这里指定9002为前台门户系统的端口。

域名即为本地域名,通过域名+端口就能访问到对应的页面了。

和后台管理系统一样,为了让域名更加地正规好看,我们使用SwitchHosts+nginx实现域名和端口的反向代理。

该方式在第142天的学习笔记中专门讲解过,这里做一个简单的回顾:

在SwitchHosts配置我们想要的一个域名为本地域名,也就是说当在浏览器上访问该域名时,系统会自动认为它对应本地域名。

而浏览器上如果不指定端口时,会默认解析成80端口,所以在nginx配置中监听该端口,并跳转到前台门户系统路径。

所以当在浏览器上访问对应域名时,实际上访问的就是nginx中配置的那个路径。

三、业务需求

今天不涉及到具体的业务实现,但是对接下来一段时间的学习做一个了解。

①搜索业务的实现

一个电商网站,搜索肯定是核心关键了。

现在可不像以前那样,还用什么模糊查询,效率太低了,有专门的搜索技术,明天开始就专门学习。

②商品详细以及RabbitMQ?

这是个啥还不太清楚,后续学到了再说。

③用户中心的实现

最常见的也就是用户的注册和登录了,这个以前就实现过好几次了。

当然还有其它的一些比如个人信息管理呀,用户地址管理,收藏管理……等。

④购物车以及下单的实现

购物车也是商城非常核心的一环,并且肯定是需要使用到支付的,微信支付或者支付宝支付等多种方式。

最后

行有不得反求诸己,我是@刘小爱

一个白天上班晚上学习的95后沪漂,不为其它,只为学会自律做好自己,也愿我的每日打卡能给你带来勇气,欢迎点赞关注和评论。