nodeJS配置前端CSS样式编程<规范处理>

    最近接触前端开发的技术比较多、基本情况大致是这样子的、最开始从C#后端程序两眼一抹黑就开始接触前台技术、完全不懂Js和css、期间发生了很多常见的错误、

    先说些题外话,然后马上开始今天的主旨内容.

  1.纯html+一般性处理文件(.ashx文件)

      <0. 这种方式方便移植和减少后台代码处理,很适合复用。场景:《1.电脑,手机,app都需开发时》,《2.需要特定语言,如jsp转php,.net》

    <1.  登陆的验证和数据不能够顺序进行(js 方式为异步、要保证每次请求页面前都验证后台session是否保存有用户信息)【asp,jsp 写个继承页面可以很轻松的验证登陆的情况】.

    <2.后台swichCase语句太多繁杂(用反射错误不可控制、且速度比较慢,将在其后陆续找到最优方式。建议最后不要偷懒把大段代码处理写到if else中,改的时候要麻烦死)

     #region 接收器

        public void ProcessRequest(HttpContext context)
        {
            InitHttpContext(context);
           
            object user = HttpContext.Current.Session["WeiXin"];
            if (user == null && HttpContext.Current.Request.UrlReferrer.ToString().ToLower().IndexOf("login.html") < 0)
            {
                HttpContext.Current.Response.StatusCode = 0x12e; //状态码为302
                HttpContext.Current.Response.RedirectLocation="login.html";
              //  Response.Write(Base.JsonInspect());
            }
            else
            {
                //解析http传输方式
                switch (context.Request.HttpMethod)
                {
                    //post数据处理
                    case "POST":
                        DoPost();
                        break;
                    //get数据处理
                    case "GET":
                        DoGet();
                        break;
                    //head数据处理
                    case "HEAD":
                        DoHead();
                        break;
                    default:
                        break;
                }
            }
        }

        #endregion

   <3.为了方便移植和复用纯post,get数据对多数据(复杂表单数据)会很复杂。(下拉菜单数据建议统一写成js插件、特别是级联筛选).

  2.由以上问题引出来一个重大问题就是兼容性处理的问题、这是做前端最头疼的问题、比较好的是boostrap框架帮我解决了许多问题、(具体了解可搜索改框架http://www.bootcss.com/),但是如果我写好一个系统,需要给不同的人,风格要求不一致、特效有所不同、需要css也有类似多态的功能,不再是再去写一道theme.css(这种方式类似于覆盖式的打补丁)、就引入了今天要自己要学习的内容.如何用less生成自己积累的css样式和js.

1、nodeJs环境

2、grunt

是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:
① 压缩文件
② 合并文件
③ 简单语法检查

3、安装grunt

npm install -g grunt-cli
有了基础环境之后,可以开始进行less以及其规范的学习了,在boostrap框架的下载内容中可以看到有个自定义样式的设置页面、其实其原理差不都就是less编写好规范之后适当改变其变量就产生了不同效果的css样式、但其样式名称未发生改变,意味着可以在css样式中产生继承和扩展的效果、

 后续内容逐步更新。


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这是一段 HTML 和 JavaScript 代码,主要实现了一个登录页面并与后端交互验证用户名和密码的功能。以下是每一行代码的解释: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登陆</title> <link rel="shortcut icon" href="./images/titlelogo.png"/> <link rel="stylesheet" href="./css/1.css"> </head> <body> ``` 这部分是 HTML 的头部,包含了页面标题、图标以及样式表的引入。 ```html <div class="login-box"> <h2>登陆</h2> <form> <div class="user-box"> <input type="text" name="username" id="username" required=""> <label>用户名</label> </div> <div class="user-box"> <input type="password" name="password" id="password" required=""> <label>密码</label> </div> <button type="submit" onclick="login(event)">登陆</button> </form> </div> ``` 这部分是登录页面的主体,包含了一个表单和两个输入框(用户名和密码),以及一个登录按钮。 ```html <script> function login(e) { e.preventDefault(); let username = document.getElementById("username").value; let password = document.getElementById("password").value; let xhr = new XMLHttpRequest(); let url = "http://localhost:8000/login"; xhr.open("POST", url, true); xhr.setRequestHeader("Content-Type", "application/json"); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { let response = JSON.parse(xhr.responseText); if (response[0].status === "success") { alert("登陆成功!"); // TODO: 跳转到其他页面 window.location.href = "./nodejs/userlist.html"; } else { alert("用户名或密码错误!"); } } }; let data = JSON.stringify({ "username": username, "password": password }); xhr.send(data); } </script> ``` 这部分是 JavaScript 代码,包含了登录按钮的点击事件,以及与后端的交互。其中: - `login` 函数是登录按钮的点击事件处理函数,用 `preventDefault()` 阻止默认的表单提交事件。 - `XMLHttpRequest` 对象用于向服务器发送请求和接收服务器响应。通过 `open` 方法设置请求类型(POST)、请求地址和是否异步,通过 `setRequestHeader` 方法设置请求头,通过 `send` 方法发送请求,并通过 `onreadystatechange` 事件监听服务器响应。 - `JSON.parse` 方法用于解析服务器返回的 JSON 格式的数据。 - `window.location.href` 属性用于在当前窗口或标签页中加载一个新文档,从而实现跳转到其他页面。 以上就是这段代码的每一行的解释。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值