node入門demo-Ajax讓前端angularjs/jquery與後臺node.js互動,技術支援：mysql+html+angularjs/jquery
阿新 • • 發佈：2018-12-11
只貼出關鍵程式碼，具體的基礎配置，在dos視窗中鍵入express -e phone,會自動幫我們設定好app.js的配置
為了讓nodejs可以渲染html頁面，在dos視窗中鍵入npm install ejs --save，會自動幫ejs的相關配置下載如node_modules資料夾下。
app.js的配置
並且在app.js中加入以下程式碼配置
//設定渲染模板為html var ejs = require( 'ejs'); app. engine( 'html', ejs1、db.js
Navicate直觀檢視var mysql = require('mysql'); var connection = mysql.createPool({ host : 'localhost', user : 'root', password : '123', database : 'shopping' }); function query(sql,callback){ connection.getConnection(function(err,connection){ connection.query(sql,function(err,rows){ callback(err,rows); connection.release(); }) }) } exports.query = query;
2、index.js
var express = require('express');
var router = express.Router();
var db = require("./db.js");
//以下是連線資料庫的操作
router.get('/getDBList',function(req,res,next){
db.query('SELECT * FROM websites',function(err,rows){
res.send(rows);
})
})
module.exports = router;
<!DOCTYPE html> <html> <head> <title>列表</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <button id="btn1">click me</button>//此處是為了測試jquery用 <div ng-app="myapp">//angularjs <div ng-controller="myController"> <button ng-click="clickMe()">點選我</button> <table> <caption>angularJS列表頁</caption> <thead> <tr> <th>id</th> <th>name</th> <th>url</th> <th>alex</th> <th>country</th> <th>content</th> </tr> </thead> <tbody> <tr ng-repeat="item in dbList"> <td ng-bind="item.id"></td> <td ng-bind="item.name"></td> <td ng-bind="item.url"></td> <td ng-bind="item.alexa"></td> <td ng-bind="item.country"></td> <td ng-bind="item.content"></td> </tr> </tbody> </table> </div> </div> <script src="/javascripts/jquery.js" type="text/javascript"></script> <script src="/javascripts/angular.js" type="text/javascript"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $.get("/getDBList",function(data,status){ console.log(data) }); }) }); </script> <script> angular.module('myapp',[]) .controller('myController',['$scope','$http',function($scope,$http){ $scope.clickMe = function(){ $http.get('/getDBList').success(function(response){ console.log(response); $scope.dbList = response; }) } }]) </script> </body> </html>
4、啟動：
在控制檯中輸入http://localhost:3000/dbList，點選按鈕即可獲得資料。
5、結果：
