实习日记a

2022-11-12 14:13:19

根据NPSaleAPI项目，学习了weUI

练习：

<a href="javascript:;" class="weui_btn weui_btn_primary">按钮</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a>
<a href="javascript:;" class="weui_btn weui_btn_warn">确认</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn">确认</a>
<a href="javascript:;" class="weui_btn weui_btn_default">按钮</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">按钮</a>
<div class="button_sp_area">
    <a href="javascript:;" class="weui_btn weui_btn_plain_default">按钮</a>
    <a href="javascript:;" class="weui_btn weui_btn_plain_primary">按钮</a>
 
    <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">按钮</a>
    <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">按钮</a>
</div>

<div class="weui_cells_title">带说明的列表项</div>

<div class="weui_cells">

<div class="weui_cell">

<div class="weui_cell_bd weui_cell_primary">

<p>标题文字</p>

</div>

<div class="weui_cell_ft">

说明文字

</div>

</div>

</div>

练习一些简单的前端HTML、css、JS

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>测试</title>

<link href="../Content/CSS/testCSS.css" />

<!--<link href="../Scripts/pageJS/testJS.js" />-->

</head>

<body>

<div class="div0">

<div class="div1">

<a href=""><img alt="广告1" src="../Content/css/image/ggg.png" width="320px" height="45px"></a>

<a href=""><img alt="广告2" src="../Content/css/image/ff.png" width="450px" height="30px" class="img1"></a>

</div>

<div class="div2">

<!-- <img alt="广告3" src="css/f.png" width="570px" height="650px"> -->

<div class="div3">

<form action="" method="get">

<table>

<tr>

<td>欢迎注册<span class="td1">已注册可</span><a href="" class="a1">直接登入</a></td>

</tr>

<tr>

<td>

<input type="text" name="phoneno" style="width:300px;height:30px" placeholder="请输入手机号" />

</td>

</tr>

<tr>

<td>

<input type="text" name="number" style="width:180px;height:30px" placeholder="请你手机获得的验证码" />

<input type="button" disabled="disabled" value="获取验证码" style="width:120px;height:35px" />

</td>

</tr>

<tr>

<td>

<input type="text" name="password" style="width:300px;height:30px" placeholder="请输入密码" />

</td>

</tr>

<tr>

<td>

<input type="text" id="lastpassword" style="width:300px;height:30px" placeholder="请再次输入密码" />

</td>

</tr>

<tr>

<td><input type="checkbox" id="xuanze"><span class="xuanze">我已阅读并接受以下条款：</span><a href="">《唯品会服务条款》</a><a href="">《隐私条款》</a><a href="">《唯品支付用户服务协议》</a><br><a href="">《唯品信用服务协议》</a></td>

</tr>

<tr>

<td>

<input type="submit" value="立即提交" style="width:300px;height:40px;color:#fff" />

</td>

</tr>

</table>

</form>

</div>

</div>

</div>

</body>

</html>

* {

margin: 0px;

padding: 0px;

}

.div0 {

margin: auto;

width: 80%;

height: 100%;

}

.div1 {

margin-top: 50px;

width: 80%;

height: 100%;

margin-left: 120px;

}

.img1 {

margin-top: -100%;

padding-left: 530px;

}

.div2 {

margin: auto;

margin-top: 40px;

width: 80%;

height: 500px;

background: url("css/g.jpg") no-repeat;

}

.div3 {

padding-top: 35px;

width: 35%;

height: 100%;

float: right;

}

a {

font-size: 12px;

text-decoration: none;

color: #1d94d1;

}

.a1 {

color: #f10280;

}

a:hover {

color: #66ccff;

}

.a1:hover {

text-decoration: underline;

color: #f10180;

}

.td1 {

margin-left: 130px;

font-size: 14px;

}

tr td {

padding: 11px;

}

.xuanze {

font-size: 13px;

}

/**

* 显示角色

* */

displayRoles();

function displayRoles(){

$.ajax({

type: "post",

url: "",

async: true,//异步

dataType: 'json',

success: function (data) {

var content = "<div ><ul>";

for (var i = 0; i < data.length; i++) {

var item = data[i];

content += "<li onclick='displayManage(" + item.roleid + ")'>" + item.rolename + "</li>";

}

content += "<div></ul>";

$("#displayroles").html(content);

},

error: function (err) {

console.log(err);

}

});

}

/**

*

*

* 顯示選中的角色信息界面

*

*/

function displayManage(roleid){

$.ajax({

type: "post",

url: "",

async: true,//异步

dataType: 'json',

data: {

roleid: roleid,

},

success: function (data) {

var state = "";

var content = "<ul>";

for (var i = 0; i < data.length; i++) {

var item = data[i];

state = item.rolestate == 1 ? "啓用" : "停用";

content += "<li>角色名：" + item.rolename + "狀態：<font-size='10' color='red'>" + state + "</font></li>";

//content+="<li>狀態：<font size='10' color='red'>"+state+"</font></li>";

content += "<li>角色描述：" + item.roledes + "</li>";

}

$("#disrole").html(content);

},

error: function (err) {

console.log(err);

}

});

}

$(document).ready(function(){

$("#displayroles").click(function () {

$("#disrole").slideToggle("slow");

});

});

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript"

src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>

</head>

</head>

<body>

<%-- <table border="1">

<caption>员工信息</caption>

<tr>

<th>ID</th>

<th>LastName</th>

<th>Email</th>

<th>Gender</th>

<th>Delete</th>

</tr>

<c:forEach items="${emps}" var="emp">

<tr>

<td>${emp.id }</td>

<td>${emp.lastName }</td>

<td>${emp.email }</td>

<td>${emp.gender == 0 ? '女':'男' }</td>

<td><a  id="delete" href="#" onclick="doDel('${pageContext.request.contextPath }/doDel/${emp.id}')">Del Employee</a></td>

<td><a href="${pageContext.request.contextPath }/gotoUpd/${emp.id}">Upd Employee</a></td>

</tr>

</c:forEach>

</table>

<a href="${pageContext.request.contextPath }/gotoDoins">Add Employee</a>

<h1>${insflag == false ? '新增成功':'新增失败'}</h1>

<br>

<form action="" method="POST" id="f">

<input type="hidden" name="_method" value="DELETE">

</form>

<h1>${delflag== false ? '删除成功':'删除失败'}</h1>

<h1>${updflag == false ? '修改成功':'修改失败'}</h1> --%>

<div id="dis"></div>

<!-- <form action="">

<input type="text" >

<input type="submit">

</form> -->

</body>

<script type="text/javascript">

display();

/*  function doDel(href) {

$("#f").attr("action", href).submit();

} */

function display(){

$.ajax({

type:"post",

url:"${pageContext.request.contextPath}/getemps",

async:true,

dataType:'json',

success:function(data){

/* for(var i = 0;i<data.length;i++){

//var emp = data[i];

alert(data[i].lastName + "==" + data[i].email);

} */

var content="<table border='1'><caption>员工信息</caption><tr><th>ID</th><th>LastName</th><th>Email</th><th>Gender</th><th>delete</th><th>update</th></tr>";

for(var i=0;i<data.length;i++){

var item=data[i];

content+="<tr><td>"+item.id+"</td>";

content+="<td>"+item.lastName+"</td>";

content+="<td>"+item.email+"</td>";

if(item.gender=="0"){

item.gender="女";

}else{

item.gender="男";

}

content+="<td>"+item.gender+"<td>";

/*  content+="<td><a id='delete' href='#' onclick='doDel('${pageContext.request.contextPath}/doDel/"+item.id+"')'>Del Employee</a></td>";  */

content+="<td><a id='delete' href='#' onclick='dodel("+item.id+")'>Del Employee</a></td>";

content+="<td><a href='${pageContext.request.contextPath }/gotoUpd/"+item.id+"'>Upd Employee</a></td></tr>";

}

content+="</table>";

content+="<a href='${pageContext.request.contextPath }/gotoDoins'>Add Employee</a>";

/* content+="<a onclick='doins()'>Add Employee</a>"; */

$("#dis").html(content);

},

error:function(err){

console.log(err);

}

});

}

function dodel(id){

if(confirm("確認刪除？")){

$.ajax({

type:"post",

url:"${pageContext.request.contextPath}/doDel",

async:true,

dataType:'json',

data:{

id:id,

},

success:function(data){

if(data[0]==true){

alert("清除失敗");

}else if(data[0]==false){

alert("清除成功");

}

display();

},

error:function(err){

console.log(err);

}

});

}

}

/*   function doins(){

content+="<form action='${pageContext.request.contextPath }/doIns' method='post'>";

content+="<table>";

content+="<tr><td>lastName<input type='text'></td></tr>";

content+="<tr><td>email<input type='text'></td></tr>";

content+="<tr><td>gender<input type='text'></td></tr>";

content+="<tr><td><input type='submit' value='提交'></tr>";

content+="</form>";

$("#disins").html(content);

} */

</script>

</html>

C# 项目的认识：

基本的文件夹命名：

Folder

Purpose

/Controllers

控制器 ：响应输入，处理业务逻辑，返回页面

/Views

控制UI显示

/Models

保存模型，以及操作模型数据

/Content

程序资源CSS，images等

/Scripts

程序脚本

根据个人爱好找到了一篇有关.NET C#和Java对比的一系列文章：

https://www.cnblogs.com/rabbityi/p/7089244.html

上一篇：[PWA] 4. Hijacking Request


下一篇：English Learning