JavaWeb3 Ajax+Axios+Element+Nginx bố trí

Ajax

Dị bước JS cùng XML
1. Số liệu trao đổi: Cấp server gửi đi thỉnh cầu, cũng thu hoạch server tương ứng số liệu
2. Dị bước lẫn nhau: Ở không một lần nữa thêm tái toàn bộ giao diện dưới tình huống, cùng server trao đổi số liệu cũng đổi mới bộ phận trang web

Đồng bộ cùng dị bước

在这里插入图片描述

Nguyên sinh Ajax

<!DOCTYPEhtml>
<html>
<body>

<divid="demo">
<h2>Làm AJAX sửa đổi này đoạn văn bản</h2>
<buttontype="button"onclick="loadDoc()">Sửa đổi văn bản</button>
</div>

</body>
</html>
FunctionloadDoc()

functionloadDoc(){
varxhttp=newXMLHttpRequest();//1. Cấu tạo XMLHttpRequest()
xhttp.onreadystatechange=function(){//3. Giám sát trạng thái biến hóa
if(this.readyState==4&&this.status==200){
document.getElementById("demo").innerHTML=this.responseText;
}
};
xhttp.open("GET","ajax_info.txt",true);//2. Khởi xướng dị bước thỉnh cầu
xhttp.send();
}

Axios

Đối nguyên sinh Ajax phong trang

<head>
<scriptsrc="js/axios-0.18.0.js"></script>Dẫn vào js folder hạ. js
</head>
<body>
<inputtype="button"value="Thu hoạch số liệu"onclick="get">
</body>
<script>
functionget(){
axios({
method:"get",
url:"http:xxxx/list"
}).then(result->{
console.log(result.data);
})
}
functionpost(){
axios({
method:"get",
url:"http:xxxx/list/deleteId",
data:"id=1",
}).then(result->{
console.log(result.data);
})
}
</script>

Phía trước video có giảng quá, đối tượng thuộc tính không cần song dấu ngoặc kép, định nghĩa json tự phù xuyến thời điểm key giá trị phải dùng song dấu ngoặc kép, thả nhất ngoại tầng muốn thêm đơn dấu ngoặc kép, bởi vì json bản chất chính là cái tự phù xuyến,

Dưới API chỉ có thể gửi đi riêng loại hình HTTP thỉnh cầu ( thường dùng ):

axios.get(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.delete(url[, config])
axios.get("http://xxxx").then(result=>{
console.log(result.data);
})
axios.post("http://xxxx","id=1").then(result=>{
console.log(result.data);
})

Trước sau đoan chia lìa khai phá

Vue-cli giàn giáo

Ỷ lại hoàn cảnh NodeJS
Trang bị + phối trí
...

Vue mục lục kết cấu

在这里插入图片描述
Có thể nhiệt bố trí: Nhiệt bố trí là chỉ không cần đình chỉ hoặc khởi động lại ứng dụng trình tự, có thể đổi mới hoặc thay đổi bộ phận số hiệu hoặc tài nguyên

Vue hạng mục khởi động

在这里插入图片描述
Thay đổi cảng hào:
Ở vue.config.js:

moudle.exports=defineConfig({
...
deServer:{// tăng thêm
port:7000
}
})
Khai phá lưu trình

Vue lắp ráp văn kiện đã.vue kết cục, từ ba cái bộ phận tạo thành:<template>, <script>, <style>
Cụ thể liền không nói tỉ mỉ... 【 hạng mục không trực tiếp dùng nó, liền hiểu biết một chút 】

Element

Lắp ráp kho – làm ngươi giao diện càng đẹp mắt

Vue lộ từ

Vue Router là Vue phía chính phủ lộ từ
Nói được hảo nha: https://blog.csdn.net/qq_45799465/article/details/123744027
router->index.js

Mới vừa khởi động khi cam chịu phỏng vấn lộ từ ’/’
Lúc này có thể dùng trọng định hướng

Đóng gói bố trí

Trước sau đoan phân biệt đặt ở bất đồng server thượng
buid đóng gói sau lại dist mục lục hạ được đến

Bố trí Nginx

Bố trí đằng trước trạng thái tĩnh tài nguyên
在这里插入图片描述
Muốn bố trí trạng thái tĩnh văn kiện đặt ở html
Bố trí: Đem đóng gói tốt dist văn kiện buông html folder.
nginx.exe khởi động
Mở ra nhiệm vụ quản lý khí - xem xét hay không tồn tại nginx tiến trình
bind() to 0.0.0.0:80 failed // cảng hào bị chiếm dụng
Cam chịu chiếm dụng 80 cảng hào, có thể ở nginx.conf trung sửa chữa cảng hào.
Sử dụngnetstat -ano |findStr 80Tới xem xét ai chiếm dụng 80 cảng hào PID
Ở conf hạ nginx.conf mở ra tìm được server listen 80 sửa cảng hào vì 90

  • 5
    Điểm tán
  • Dẫm
  • 9
    Cất chứa
    Cảm thấy cũng không tệ lắm? Một kiện cất chứa
  • 1
    Bình luận
javaweb chương trình học thiết kế là một loại lợi dụng JSP,JavaBean cùng Servlet kỹ thuật thực hiện chương trình học thiết kế. JSP (JavaServer Pages ) là một loại động thái trang web khai phá kỹ thuật, có thể thực hiệnjavaSố hiệu cùng HTML đánh dấu ngôn ngữ hỗn hợp biên trình, thực hiện trạng thái tĩnh giao diện cùng động thái giao diện kết hợp.JavaBean là một loại nhưng trọng dụng lắp ráp, cung cấp một loại đơn giản mà cường đại phương pháp tới quản lý ứng dụng trình tự hành vi. Servlet là vận hành ở server quả nhiênJavaLoại nhỏ trình tự, có thể tiếp thu bản cài đặt thỉnh cầu, hơn nữa hưởng ứng thỉnh cầu. Ởjavaweb chương trình học thiết kế trung, có thể thông qua JSP tiến hành giao diện thiết kế cùng động thái nội dung triển lãm, đồng thời lợi dụngJavaBean tới xử lý hậu trường logic nghiệp vụ. Tỷ như, thực hiện học sinh tin tức bổ sung và cắt bỏ sửa tra cùng với cùng cơ sở dữ liệu lẫn nhau thao tác. Mà Servlet tắc có thể dùng để xử lý bản cài đặt thỉnh cầu cùng hưởng ứng, tỷ như tiếp thu biểu đơn đệ trình số liệu, đối số liệu tiến hành xử lý, sau đó phản hồi xử lý kết quả cấp bản cài đặt. Thông qua phương thức này, có thể thực hiện một cái hoàn chỉnhjavaweb chương trình học thiết kế, bao gồm trước đài giao diện thiết kế cùng hậu trường nghiệp vụ xử lý, đồng thời thông qua Servlet cùng cơ sở dữ liệu tiến hành lẫn nhau, thực hiện một cái hoàn chỉnh trang web ứng dụng trình tự. Loại này chương trình học thiết kế có thể làm học sinh tổng hợp vận dụng JSP,JavaBean cùng Servlet tri thức, rèn luyện bọn họ biên trình năng lực cùng thiết kế năng lực, đồng thời cũng có thể đủ làm cho bọn họ hiểu biết cũng nắm giữ web khai phá cơ bản nguyên lý cùng kỹ thuật, vì tương lai công tác đánh hạ kiên cố cơ sở.

“Tương quan đề cử” đối với ngươi có trợ giúp sao?

  • Phi thường không trợ giúp
  • Không trợ giúp
  • Giống nhau
  • Có trợ giúp
  • Phi thường có trợ giúp
Đệ trình
Bình luận1
Tăng thêm bao lì xì

Thỉnh điền bao lì xì chúc phúc ngữ hoặc tiêu đề

Cái

Bao lì xì cái số nhỏ nhất vì 10 cái

Nguyên

Bao lì xì kim ngạch thấp nhất 5 nguyên

Trước mặt ngạch trống3.43Nguyên Đi trước nạp phí >
Cần chi trả:10.00Nguyên
Thành tựu một trăm triệu kỹ thuật người!
Lĩnh sau ngươi sẽ tự động trở thành bác chủ cùng bao lì xì chủ fans Quy tắc
hope_wisdom
Phát ra bao lì xì
Thật phóNguyên
Sử dụng ngạch trống chi trả
Điểm đánh một lần nữa thu hoạch
Quét mã chi trả
Tiền bao ngạch trống 0

Để khấu thuyết minh:

1. Ngạch trống là tiền bao nạp phí giả thuyết tiền, dựa theo 1:1 tỉ lệ tiến hành chi trả kim ngạch để khấu.
2. Ngạch trống vô pháp trực tiếp mua sắm download, có thể mua sắm VIP, trả phí chuyên mục cập chương trình học.

Ngạch trống nạp phí